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

起初这总是有点令人困惑。在我看来，样式名称选择不当。血腥细节尽在 drawBackground() ItemRenderer的方法类(class)。
contentBackgroundColor样式是您可以在 List 上设置的内容组件本身，它对渲染器没有影响。它将填充列表的背景颜色，但通常渲染器会占据该区域的所有区域，因此您永远看不到它。例如，如果您的列表很高但其中只有 1 或 2 个项目(因此底部的空间没有被渲染器覆盖)，它将是可见的。

设置渲染器的背景颜色:

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

alternatingItemColors="[#c0c0c0]"

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

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

downColor

selectionColor

rollOverColor

绘制自己的背景颜色:

设置 autoDrawBackground属性为假。这意味着您现在必须为所有各种渲染器状态(“正常”、“选定”、“悬停”等)绘制自己的颜色。幸运的是，您可以在渲染器中使用与上面在您选择的背景对象(`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>