Question

（我的另一个永无止境的问题......）

我需要一个图像组件，其状态的行为类似于ToggleButton。我认为我会尝试继承ToggleButton并定义自定义Flex skin，而不是从头开始构建。我没有太多的皮肤使用经验，并拼凑了下面的代码。

似乎效果很好 - 将BitmapImages绑定到按钮实例中BitmapData加载到<s:BitmapImage source="{hostComponent.upImageData}"

我采用这种方法走在正确的轨道上吗？对这类事情有更标准的方法吗？

ToggleButton Skin

<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

是的，你正在以正确的方式前进。＆＃34;皮肤机制＆＃34;是真正强大而灵活的工具。一年前我有类似的任务，我以同样的方式解决了它（只需使用标准的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 mailing list thread。

动态加载皮肤图像

2 个答案: