ItemRenderer изменить цвет фона

Question

У меня есть средство визуализации элементов, что я хочу, чтобы изменить цвета по умолчанию из:

<s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009" 
       xmlns:s="library://ns.adobe.com/flex/spark" 
       xmlns:mx="library://ns.adobe.com/flex/mx" 
       initialize="init(event)" 
       creationComplete="created(event)" 
       dataChange="created(event)" 
       width="100%" 
       maxWidth="{FlexGlobals.topLevelApplication.width}" 
       contentBackgroundColor.hovered="0xff0018" 
       focusColor="0xff00ff" 
       contentBackgroundAlpha="0.8"> 

     <s:states> 
      <s:State name="normal"/> 
      <s:State name="hovered"/> 
      <s:State name="selected"/> 
     </s:states> 

стилей в коде выше не имеют никакого эффекта.

Я также попытался добавить contentBackgroundColor в элемент List, но это изменило только фон списка, а не элементы.

CSS не работает либо:

s|ItemRenderer{ 
    backgroundColor:#2e2e2e; 
} 

Как я могу изменить цвет фона визуализации элемента?

Я знаю, что могу скрыть его, но это было бы излишним для простого изменения цвета, и я уверен, что у меня было пару лет назад без скиннинга.

Answer 1

Это всегда немного запутывает. На мой взгляд, имена стиля плохо выбраны. Детали gory все находятся в методе drawBackground() класса ItemRenderer.

Стиль contentBackgroundColor - это то, что вы можете установить на сам компонент , он не оказывает никакого влияния на рендер. Он заполнит фоновый цвет списка, но обычно визуализаторы занимают всю эту область, поэтому вы никогда ее не увидите. Было бы видно, например, если ваш список высок, но имеет только 1 или 2 элемента (таким образом, пространство внизу не покрывается средством визуализации).

Чтобы установить цвет фона визуализатора:

Вместо использования contentBackgroundColor используйте alernatingItemColors стиль. Этот стиль ожидает массив значений. Если вы хотите только один цвет, просто поставить один элемент в массиве:

alternatingItemColors="[#c0c0c0]" 

Глядя на код в drawBackground(), если вы хотите установить альфа на цвет фона, вы должны сделать фон самостоятельно (Смотри ниже).

Другие связанные стили фона вы, возможно, захотите установить:

• downColor
• selectionColor
• rollOverColor

Чтобы сделать свои собственные цвета фона:

Установите для свойства autoDrawBackground значение false. Это означает, что теперь вы должны нарисовать свои собственные цвета для всех состояний визуализатора («нормальный», «выбранный», «зависающий» и т. Д.). К счастью, вы можете сделать это внутри средства визуализации с тем же синтаксисом состояния, который вы использовали выше, на выбранном вами фоновом объекте (`Rect и т. Д.).

<s:ItemRenderer autodrawBackground="false"> 
    <s:states> 
     <s:State name="normal"/> 
     <s:State name="hovered"/> 
     <s:State name="selected"/> 
    </s:states> 
    <s:Rect id="theBackgroundObject" top="0" bottom="0" left="0" right="0"> 
     <s:fill> 
      <s:SolidColor color="#FF0000" color.hovered="#00FF00" 
       alpha="1" alpha.hovered=".5" /> 
     </s:fill> 
    </s:Rect> 
</s:ItemRenderer>