flex 4.5简单火花按钮蒙皮

| 有人错过了为简单按钮蒙皮的旧的简单方法吗？ 
<mx:Button x=\"10\" y=\"10\" label=\"\"
           upSkin=\"@Embed(\'imgs/mainButton_std.png\')\"
           overSkin=\"@Embed(\'imgs/mainButton_over.png\')\"
           downSkin=\"@Embed(\'imgs/mainButton_over.png\')\"
           disabledSkin=\"@Embed(\'imgs/mainButton_std.png\')\"
           creationComplete=\"mainButtonHitArea()\"
           width=\"75\" height=\"75\" id=\"menuButton\" enabled=\"true\"/>
//mainButtonHitArea() : Is a generic function that generates the hit area
问题在于，这种用皮肤创建简单按钮的方法已被淘汰：实际上，Flex 4.5移动项目不再支持该方法。 所以问题来了：是否有一种简单的方法可以通过火花按钮（应该是新的方法）来执行此操作。尽可能简单。 基本上我只需要一个带有2张图像的按钮：向下/向上和向上。我想使代码尽可能简单：新的蒙皮方法似乎真的为上面的示例中的简单示例添加了太多行。     
2020-02-27 4 条评论
分享

没有找到相关结果

    已邀请:

    翰冒绢县

            您可以创建外观，例如（作为MyButtonSkin.mxml）： 
    <?xml version=\"1.0\" encoding=\"utf-8\"?>
<s:SparkSkin name=\"MyButtonSkin\"
             xmlns:fx=\"http://ns.adobe.com/mxml/2009\" 
             xmlns:s=\"library://ns.adobe.com/flex/spark\" 
             xmlns:fb=\"http://ns.adobe.com/flashbuilder/2009\">
    <s:states>
        <s:State name=\"up\" />
        <s:State name=\"over\" />
        <s:State name=\"down\" />
        <s:State name=\"disabled\" />
    </s:states>    
    <fx:Metadata>
        <![CDATA[
        [HostComponent(\"spark.components.Button\")]
        ]]>
    </fx:Metadata>    
    <s:BitmapImage source.disabled=\"@Embed(\'assets/image1.png\')\" 
                source.down=\"@Embed(\'assets/image2.png\')\" 
                source.up=\"@Embed(\'assets/image3.png\')\" 
                source.over=\"@Embed(\'assets/image4.png\')\" />
</s:SparkSkin>
    然后，您可以将该皮肤分配给某个按钮： 
    <s:Button skinClass=\"MyButtonSkin\"/>
        
    2020-02-27 0 0
    分享

    物崎巩

            这是更通用的基本图像按钮： ImageButtonSkin.mxml 
    <s:SparkButtonSkin xmlns:fx=\"http://ns.adobe.com/mxml/2009\" 
             xmlns:s=\"library://ns.adobe.com/flex/spark\" 
             xmlns:fb=\"http://ns.adobe.com/flashbuilder/2009\">
    <fx:Metadata>
        [HostComponent(\"com.instantdelay.flex.commons.ImageSkinnableButton\")]
    </fx:Metadata>
    <s:states>
        <s:State name=\"up\" />
        <s:State name=\"over\" />
        <s:State name=\"down\" />
        <s:State name=\"disabled\" />
    </s:states>
    <s:BitmapImage id=\"image\"
                   source.up=\"{getStyle(\'upImage\')}\"
                   source.down=\"{getStyle(\'downImage\')}\"
                   source.over=\"{getStyle(\'overImage\')}\"
                   source.disabled=\"{getStyle(\'disabledImage\')}\"
                   />
</s:SparkButtonSkin>
    ImageSkinnableButton.as 
    [Style(name=\"upImage\", inherit=\"no\", type=\"Class\")]
[Style(name=\"downImage\", inherit=\"no\", type=\"Class\")]
[Style(name=\"overImage\", inherit=\"no\", type=\"Class\")]
[Style(name=\"disabledImage\", inherit=\"no\", type=\"Class\")]
public class ImageSkinnableButton extends Button
{
    public function ImageSkinnableButton()
    {
        super();
        setStyle(\"skinClass\", ImageButtonSkin);
    }
}
    然后，您可以在CSS（首选）或mxml中的按钮上将图像设置为样式： 
    <commons:ImageSkinnableButton
    upImage=\"@Embed(\'imgs/mainButton_std.png\')\"
    overImage=\"@Embed(\'imgs/mainButton_over.png\')\"
    downImage=\"@Embed(\'imgs/mainButton_over.png\')\"
    disabledImage=\"@Embed(\'imgs/mainButton_std.png\')\" />
        
    2020-02-27 0 0
    分享

    逆捐凶撤小

            您还可以为默认的spark.components.Button组件定义一个ButtonImageSkin，例如在imageskins包中： 
    <s:SparkButtonSkin xmlns:fx=\"http://ns.adobe.com/mxml/2009\" 
    xmlns:s=\"library://ns.adobe.com/flex/spark\" 
    xmlns:fb=\"http://ns.adobe.com/flashbuilder/2009\">
    <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>
    <s:BitmapImage source=\"{getStyle(\'backgroundImage\')}\"/>
</s:SparkButtonSkin>
    只需在外观类本身上定义样式，然后将图像源绑定到该样式即可。现在，您可以使用CSS伪选择器控制实际图像： 
    @namespace imageskins \"imageskins.*\";
s|Button {
    skinClass: ClassReference(\"imageskins.ButtonImageSkin\");    
}
imageskins|ButtonImageSkin:up {
    backgroundImage: Embed(source=\"assets/images/button-up.png\");
}
imageskins|ButtonImageSkin:down {
    backgroundImage: Embed(source=\"assets/images/button-down.png\");
}
imageskins|ButtonImageSkin:over {
    backgroundImage: Embed(source=\"assets/images/button-over.png\");
}
imageskins|ButtonImageSkin:disabled {
    backgroundImage: Embed(source=\"assets/images/button-disabled.png\");
}
    这样，您可以使用基于CSS的更灵活的规则来获得结果。我最终为各种Flex组件创建了一组基于图像的Spark外观：FXG功能更强大，但有时使用scale9图像只是获得所需结果的最快方法。 旁注：如果将外观类和CSS文件（具有任何名称）放在Flex库项目中，并使用-theme选项编译客户端项目，则Flex将自动应用CSS。以及将它们与其宿主组件相关联的CSS。     
    2020-02-27 0 0
    分享
    为什么被折叠? 0 个回复被折叠

    要回复问题请先登录或注册

    或代码 OrCode.com 备案号：粤ICP备15020848号-1
    Escape time: 0.15681982040405