使用 itemRenderer 更改 List 的 contentBackgroundColor

Question

嘿，我正在尝试根据 dataprovider 中找到的内容更改 List 组件的 contentBackgroundColor。例如：

<s:ItemRenderer name="ir"
    xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:s="library://ns.adobe.com/flex/spark" 
    xmlns:mx="library://ns.adobe.com/flex/mx" 
    autoDrawBackground="true"
    contentBackgroundColor="{(data.location == 'home')?0x000000:0x666666}">

不幸的是，这似乎被忽略了，因为列表只显示了默认的白色背景。任何人都可以提出解决方案吗？

Answer 1

我会覆盖 set data setter 方法并在那里设置样式，因为您可以保证捕捉到对数据的每一次更改：

override public function set data(value:Object):void {
    super.data = value;
    this.setStyle("contentBackgroundColor", value.location == "home" ? 0x000000 : 0x666666);
}

Answer 2

ItemRenderer 从不尊重 contentBackgroundColor 的 Group 扩展而来，而是将其作为继承样式传递给其元素。

所以 contentBackgroundColor 确实有效，但不是您所期望的那样，如果您将一个确实尊重 contentBackgroundColor 的组件放入您的渲染器中，那么它将获得该颜色，例如：

<s:List>
    <s:dataProvider>
        <s:ArrayList>
            <fx:String>0</fx:String>
        </s:ArrayList>
    </s:dataProvider>
    <s:itemRenderer>
        <fx:Component>
            <s:ItemRenderer contentBackgroundColor="red">
                <s:VGroup paddingBottom="10" paddingLeft="10" paddingRight="10" paddingTop="10">
                    <s:Label text="ItemRenderer {data}" />
                    <s:ComboBox />
                </s:VGroup>
            </s:ItemRenderer>
        </fx:Component>
    </s:itemRenderer>
</s:List>

如前所述，您最好覆盖数据设置器并从那里更改背景 Rect 的颜色，例如：

<s:List>
    <s:dataProvider>
        <s:ArrayList>
            <fx:String>0</fx:String>
            <fx:String>1</fx:String>
        </s:ArrayList>
    </s:dataProvider>
    <s:itemRenderer>
        <fx:Component>
            <s:ItemRenderer>
                <fx:Script>
                    <![CDATA[
                        override public function set data(value:Object):void {
                            super.data = value;
                            if (data == null)
                                return;

                            if (data == 1){
                                c.color = 0xEEEEEE;
                            } else {
                                c.color = 0x666666;   
                            }
                        }
                    ]]>
                </fx:Script>
                <s:Rect width="100%" height="100%">
                    <s:fill>
                        <s:SolidColor id="c" />
                    </s:fill>
                </s:Rect>
                <s:Label text="ItemRenderer {data}" />
            </s:ItemRenderer>
        </fx:Component>
    </s:itemRenderer>
</s:List>