動態加載皮膚圖像

Question

（我永無休止的另一個問題...）

我需要一個狀態類似於ToggleButton的圖像組件。 我認為不是嘗試從頭開始構建，而是嘗試ToggleButton並定義自定義Flex skin 。 我沒有很多皮膚剝皮經驗，因此將下面的代碼拼湊在一起。

似乎效果很好–將皮膚中的BitmapImages綁定到按鈕實例中加載的BitmapData ： <s:BitmapImage source="{hostComponent.upImageData}"

我采用這種方法走上正確的路嗎？ 有沒有更標准的方法來處理這種事情？

切換按鈕外觀

<s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009" 
                   xmlns:s="library://ns.adobe.com/flex/spark" 
                   xmlns:fb="http://ns.adobe.com/flashbuilder/2009"
                   minWidth="21" minHeight="21" 
                   alpha.disabledStates="0.5">
    <fx:Metadata>[HostComponent("components.EventButton")]</fx:Metadata>

    <!-- host component -->
    <!-- states -->
    <s:states>
        <s:State name="up" />
        <s:State name="over" stateGroups="overStates" />
        <s:State name="down" stateGroups="downStates" />
        <s:State name="disabled" stateGroups="disabledStates" />
        <s:State name="upAndSelected" stateGroups="selectedStates, selectedUpStates" />
        <s:State name="overAndSelected" stateGroups="overStates, selectedStates" />
        <s:State name="downAndSelected" stateGroups="downStates, selectedStates" />
        <s:State name="disabledAndSelected" stateGroups="selectedUpStates, disabledStates, selectedStates" />
    </s:states>

    <s:BitmapImage source="{hostComponent.upImageData}" 
                   includeIn="up, disabled"
                   left="0" right="0" top="0" bottom="0" />

    <s:BitmapImage source="{hostComponent.overImageData}" 
                   left="0" right="0" top="0" bottom="0" 
                   includeIn="over"/>

    <s:BitmapImage source="{hostComponent.downImageData}" 
                   left="0" right="0" top="0" bottom="0" 
                   includeIn="down, upAndSelected, overAndSelected, downAndSelected"/>
</s:Skin>

---

切換按鈕

<?xml version="1.0" encoding="utf-8"?>
<s:ToggleButton xmlns:fx="http://ns.adobe.com/mxml/2009"
          xmlns:s="library://ns.adobe.com/flex/spark"
          xmlns:mx="library://ns.adobe.com/flex/mx"
          xmlns:skins = "skins.*"
          skinClass="skins.EventSkin"
          creationComplete="creationCompleteHandler(event)">

    <fx:Script>
        <![CDATA[

            [Bindable]
            public var upImageData:BitmapData;

            [Bindable]
            public var overImageData:BitmapData;

            [Bindable]
            public var downImageData:BitmapData;

            [Bindable]
            public var disabledImageData:BitmapData;

            // image loading code removed

        ]]>
    </fx:Script>
</s:ToggleButton>

Answer 1

是的，您的做法正確。 “皮膚機制”是真正強大而靈活的工具。 大約一年前，我完成了類似的任務，並且以相同的方式解決了這一問題（僅使用標准的ToggleButton和自定義外觀即可）。 火花組件視覺表示中的所有更改都可能屬於外觀類。

Answer 2

作為另一個選擇，您應該能夠使用狀態變量語法：

<s:ToggleButton icon.up="{upIcon}"
        icon.over="{overIcon}"
        icon.down="{downIcon}"
        icon.disabled="{disabledIcon}"
        icon.upAndSelected="{upAndSelectedIcon}"
        icon.overAndSelected="{overAndSelectedIcon}"
        icon.downAndSelected="{downAndSelectedIcon}"
        icon.disabledAndSelected="{disabledAndSelectedIcon}" />

有關此內容的更多討論，請參見此Apache 郵件列表線程 。