4

I have an item renderer that I want to change default colors of:

<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>

The styles in the above code have no effect.

I also tried adding contentBackgroundColor to the List element but that only changed the background of the list and not the items.

css doesn't work either:

s|ItemRenderer{
    backgroundColor:#2e2e2e;
}

How can I change background color of the item renderer?

I know I can skin it but that would be an overkill for a simple color change and I am positive that I had it working couple of years back without skinning.

4

1 回答 1

8

起初这总是有点令人困惑。在我看来，样式名称选择不当。血淋淋的细节都在类的drawBackground()方法中ItemRenderer。

contentBackgroundColor样式是您可以在组件本身上设置的东西，List它对渲染器没有影响。它将填充列表的背景颜色，但通常渲染器会占据所有该区域，因此您永远看不到它。例如，如果您的列表很高，但其中只有 1 或 2 个项目（因此底部的空间没有被渲染器覆盖），它将是可见的。

设置渲染器的背景颜色：

而不是使用contentBackgroundColor，使用alernatingItemColors样式。这种风格需要一个值数组。如果您只想要一种颜色，只需将一个元素放入数组中：

alternatingItemColors="[#c0c0c0]"

通过查看 中的代码drawBackground()，如果要在背景颜色上设置 alpha，则必须自己绘制背景（见下文）。

您可能希望设置的其他背景相关样式：

  • 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>
于 2013-03-05T23:52:51.353 回答