我想创建一个在标签和图像之间切换的自定义复选框

Question

我想通过扩展一个 spark Button 类来创建一个自定义的可重用组件，以便它具有一个复选框和一个显示图像的标签。选中复选框时，将显示图像而不是标签。图像路径应作为 API 公开。我们如何扩展 spark.components.Button 使其带有标签或图像的复选框（图像路径应该是动态的）。

我尝试如下扩展 Button 类，但不确定如何在其中创建复选框以及如何将图像路径作为参数传递给它。

package myClasses
{
    import spark.components.Button;

    public class ImageCheckBox extends Button
    {
        public function ImageButton()
        {
            super();
            this.buttonMode = true;
        }
    }
}

我想在应用程序中使用类似下面的自定义组件。

<myClasses:ImageCheckBox skinClass="mySkins.HelpButtonSkin" path="...."" label="Show Image" />

Answer 1

类似的东西

package myClasses {
import flash.events.Event;

import spark.components.CheckBox;
import spark.components.Image;
import spark.components.Label;
import spark.components.supportClasses.SkinnableComponent;

public class ImageCheckBox extends SkinnableComponent {
    [SkinPart(required=true)]
    public var checkBox:CheckBox;

    [SkinPart(required=true)]
    public var labelComp:Label;

    [SkinPart(required=true)]
    public var image:Image;

    private var pathChanged:Boolean = false;
    private var _path:String;
    public function get path():String {
        return _path;
    }

    public function set path(value:String):void {
        if (_path != value) {
            _path = value;
            pathChanged = true;
            invalidateProperties();
        }
    }

    private var labelChanged:Boolean = false;
    private var _label:String;
    public function get label():String {
        return _label;
    }

    public function set label(value:String):void {
        if (_label != value) {
            _label = value;
            labelChanged = true;
            invalidateProperties();
        }
    }

    public function ImageCheckBox() {
        super();
        setStyle("skinClass", ImageCheckBoxSkin);
    }

    override protected function partAdded(partName:String, instance:Object):void {
        super.partAdded(partName, instance);

        if (instance == checkBox) {
            checkBox.addEventListener(Event.CHANGE, checkBoxChangeHandler)
        }
        else if (instance == labelComp) {
            labelComp.text = label;
        }
        else if (instance == image) {
            image.source = path;
        }
    }

    override protected function partRemoved(partName:String, instance:Object):void {
        super.partRemoved(partName, instance);

        if (instance == checkBox) {
            checkBox.removeEventListener(Event.CHANGE, checkBoxChangeHandler)
        }
    }

    override protected function getCurrentSkinState():String {
        return checkBox.selected ? "selected" : super.getCurrentSkinState();
    }

    override protected function commitProperties():void {
        if (labelChanged) {
            labelChanged = false;
            labelComp.text = label;
        }

        if (pathChanged) {
            pathChanged = false;
            image.source = path;
        }

        super.commitProperties();
    }

    private function checkBoxChangeHandler(event:Event):void {
        invalidateSkinState();
    }
}}

还有皮肤

<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"
    xmlns:mx="library://ns.adobe.com/flex/mx">

<!-- host component -->
<fx:Metadata>
    <![CDATA[
    /**
     * @copy spark.skins.spark.ApplicationSkin#hostComponent
     */
    [HostComponent("myClasses.ImageCheckBox")]
    ]]>
</fx:Metadata>

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

<s:HGroup width="100%" height="100%" gap="3">
    <s:CheckBox id="checkBox"
                verticalCenter="0"
                height="100%"/>
    <s:Label id="labelComp"
             verticalCenter="0" verticalAlign="middle"
             width="100%" height="100%"
             visible.normal="true" includeInLayout.normal="true"
             visible.selected="false" includeInLayout.selected="false"/>
    <s:Image id="image"
             verticalCenter="0"
             width="100%" height="100%"
             fillMode="scale" scaleMode="letterbox"
             visible.normal="false" includeInLayout.normal="false"
             visible.selected="true" includeInLayout.selected="true"/>
</s:HGroup>