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

Привет! Я пытаюсь изменить 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}">

К сожалению, это, похоже, игнорируется, поскольку в списке просто отображается белый фон по умолчанию. Кто-нибудь может предложить решение?


list apache-flex flex4 itemrenderer flash-builder
person worked    schedule 11.02.2011    source источник

Ответы (2)


arrow_upward
1
arrow_downward

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

override public function set data(value:Object):void {
    super.data = value;
    this.setStyle("contentBackgroundColor", value.location == "home" ? 0x000000 : 0x666666);
}
person Wade Mueller    schedule 11.02.2011
comment
Хороший звонок, но все еще игнорируется. Если я отслеживаю (value.location) в методе набора данных itemrenderer, он отслеживает больше раз, чем у меня есть элементы местоположения в моем xml. В два раза больше +1 на самом деле. Очень странное поведение... - person worked; 11.02.2011
comment
Хммм, а что произойдет, если вы установите для autoDrawBackground значение false? Кроме того, другим подходом было бы установить для него значение false и добавить Rect к фону средства визуализации вашего элемента и установить цвет заливки по своему усмотрению. - person Wade Mueller; 11.02.2011
comment
При autoDrawBackground = false фон остается белым, но подсветка элементов теперь отключена. Я попробую решение Rect, видел это и на странице справки Adobe. - person worked; 11.02.2011
comment
Добавление ‹s:Rect› ‹s:fill› ‹s:SolidColor color=0x000000/› ‹/s:fill› ‹/s:Rect› не работает. - person worked; 11.02.2011
comment
Вам нужно придать ему размеры. Либо ширина/высота 100%, либо лево, право, верх, низ = 0. - person Wade Mueller; 11.02.2011
comment
Кроме того, вам нужно установить цвет Rect, а не contentBackgroundColor (если это неясно). - person Wade Mueller; 12.02.2011

arrow_upward
1
arrow_downward

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>
person sshongru    schedule 27.02.2011
comment
Что делать, если ваш itemRenderer является внешним и у вас есть несколько меток в одном горизонтальном макете. Например: <s:layout> <s:HorizontalLayout gap="0" variableColumnWidth="true" paddingBottom="14" paddingLeft="0" paddingTop="14" horizontalAlign="center" /> </s:layout> <s:Rect width="100%" height="100%"> <s:fill> <s:SolidColor id="c" /> </s:fill> </s:Rect> <s:Label id="locationLbl" width="60" /> <s:Label id="opponentLbl" width="90" /> <s:Label id="timeLbl" width="60"/> <s:Label id="dateLbl" width="60" /> - person worked; 28.02.2011
comment
Это трудно объяснить. Если я применю приведенный выше код к моему внешнему itemRenderer, он отобразит цветную рамку непосредственно перед началом первой метки. Если критерии в условном выражении истинны, это цветное поле окрашивается в определенный цвет. Однако, когда я прокручиваю свой список, он ведет себя странно и отображает другие поля того же цвета случайным образом. Я надеюсь, что в этом есть смысл. - person worked; 28.02.2011