Изменить contentBackgroundColor списка с itemRenderer

Question

Привет! Я пытаюсь изменить contentBackgroundColor компонента List в зависимости от содержимого, найденного в поставщике данных. Например:

<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

ItemRenderer происходит от Group, которая не уважает contentBackgroundColor, но скорее передает его своим элементам как стиль наследования.

Так что 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>

Answer 2

Я бы переопределил метод set set setter и установил там стиль, поскольку вы гарантированно поймаете каждое изменение в данных:

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