Средство визуализации элементов Flex - изменение альфа-канала при нажатии

Я хочу изменить альфу Rect при нажатии элемента списка, но я не смог это решить. И я не знаю, как именно это сделать, поскольку я делаю это на Rectangle внутри средства визуализации элементов, есть ли какие-либо предложения?

КОД:

<s:List id="list" labelField="name" dataProvider="{items}" top="20" bottom="20" left="20" right="20" 
                contentBackgroundAlpha="0"
                change="list_changeHandler(event)">
            <s:itemRenderer>
                <fx:Component>
                    <s:ItemRenderer width="100%" height="200" autoDrawBackground="false" contentBackgroundAlpha="0">

                        <s:Group width="100%" height="100%">
                            <s:Rect id="rect" left="0" right="0" top="0" bottom="0" alpha="0.3">
                                <s:fill>
                                    <s:SolidColor color="#FFFFFF" 
                                                   />
                                </s:fill>
                            </s:Rect>
                            <s:Image source="{data.icon}" top="30" horizontalCenter="0"/>
                            <s:Label text="{data.name}" top="100" horizontalCenter="0" color="#101010" fontWeight="bold" fontSize="16"/>
                            <s:Label text="{data.line1}" top="130" horizontalCenter="0" color="#343434" fontSize="14"/>
                            <s:Label text="{data.line2}" top="150" horizontalCenter="0" color="#343434" fontSize="14"/>
                        </s:Group>
                    </s:ItemRenderer>
                </fx:Component>
            </s:itemRenderer>
            <s:layout>
                <s:TileLayout requestedColumnCount="3" requestedColumnCount.landscape="4" columnAlign="justifyUsingWidth"/>
            </s:layout>
        </s:List>

apache-flex flex4 flex-mobile
person Zaur Guliyev    schedule 06.06.2012    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Для этого вы можете использовать состояния ItemRenderer. Добавьте эти состояния в свой ItemRenderer:

<s:states>
    <s:State name="normal" />
    <s:State name="hovered" />
    <s:State name="selected" />
</s:states>

<s:Rect left="0" right="0" top="0" bottom="0">
    <s:fill>
        <s:SolidColor color.normal="0x0000ff" 
                      color.hovered="0x00ff00" 
                      color.selected="0xff0000" />
    </s:fill>
</s:Rect>

С этим кодом ваш рендерер по умолчанию будет синим; он станет зеленым, когда вы наведете на него курсор; и красный, когда вы выбираете его. То же самое, конечно, можно сделать и со значением alpha.

person RIAstar    schedule 06.06.2012
comment
+1 от меня; Я не знал, что класс ItemRenderer имеет предопределенные состояния. - person JeffryHouser; 06.06.2012
comment
@www.Flextras.com Просто взгляните на код ItemRenderer#getCurrentRendererState() - person RIAstar; 06.06.2012
comment
Спасибо! Очень полезный пример для меня, чтобы понять использование состояний!.. (я не использую их часто, но я думаю, что теперь буду делать это) еще раз спасибо! - person Zaur Guliyev; 06.06.2012
comment
@lbstr Механизм «нового» состояния — одна из самых мощных функций Spark. Я использую их все время. Однако вы должны понимать, что этот пример является особым случаем, потому что состояния и их триггеры уже предопределены в классе ItemRenderer (например, пользователь наводит указатель мыши на средство визуализации › переключается в состояние «зависание»). В большинстве случаев вам придется настроить эти триггеры самостоятельно. - person RIAstar; 06.06.2012