使用itemRenderer更改List的contentBackgroundColor

时间:2011-02-11 14:03:11

标签: flex list flex4 flash-builder itemrenderer

嘿那里 - 我正在尝试根据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}">

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

2 个答案:

答案 0 :(得分:1)

我会覆盖set data setter方法并在那里设置样式,因为您可以保证捕获数据的每个更改:

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

答案 1 :(得分:1)

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>