在 CSS 上嵌入图像以形成扩展的 Spark 按钮 (IconButton)

Question

我有这个 IconButton：

Class

package extra {

    import spark.components.Button;
    import spark.primitives.BitmapImage;

    public class IconButton extends Button {

        private var _icon:Class;

        [SkinPart(required="false")]
        public var iconElement:BitmapImage;

        public function get icon():Class {

            return _icon;

        }

        public function set icon(val:Class):void {

            _icon = val;

            if (iconElement != null) {

                iconElement.source = _icon;

            }

        }

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

            super.partAdded(partName, instance);

            if (icon !== null && instance == iconElement) {

                iconElement.source = icon;

            }

        }

    }

}

Skin

<?xml version="1.0" encoding="utf-8"?>
<s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" minWidth="40" minHeight="22">

    <fx:Metadata>
       [HostComponent("spark.components.Button")]
    </fx:Metadata>

    <s:states>
        <s:State name="up" />
        <s:State name="over" />
        <s:State name="down" />
        <s:State name="disabled" />
    </s:states>

    <!-- background -->
    <s:BitmapImage id="iconElement" width="104" height="54"/>

    <!-- label -->
    <s:Label
    id="labelDisplay"
    textAlign="center"
    color="0xffffff"
    fontFamily="AudiNormal"
    fontWeight="bold"
    fontSize="15"
    width="100%"
    top="64"
    />
</s:Skin>

CSS

e|IconButton {
    skinClass: ClassReference('skins.IconButton');
}

非常适合：

MXML

<extra:IconButton icon="@Embed('../assets/img/animals/dog.png')">Dog Name</extra:IconButton>

但是我该怎么做呢？

MXML

<extra:IconButton styleName="dog">Dog Name</extra:IconButton>

CSS

e|IconButton {
    skinClass: ClassReference('skins.IconButton');
}

.dog {
    icon: Embed('../assets/img/animals/dog.png');
}

Answer 1

删除图标属性并使用样式代替：

[Style(name="icon", type="Class", inherit="no")]

在您的皮肤文件中：

<s:BitmapImage id="iconElement" width="104" height="54" icon="{hostComponent.getStyle('icon')}/>

只是猜测，但尚未测试......