Flex 中的按钮皮肤问题

Posted 2023-02-18

【中文标题】Flex 中的按钮皮肤问题

【英文标题】：Button skin issue in Flex

【发布时间】：2013-05-01 20:17:51

【问题描述】：

我创建了一个名为 htmlBtnBlue.mxml 的按钮皮肤，我用 HTMLBtnBlue.mxml 的副本创建了另一个皮肤，并将其命名为 HTMLBtnYellow，并将颜色更改为 0xF8C313。 HTMLBtn.mxml 的代码如下

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

<fx:Style>
@namespace s "library://ns.adobe.com/flex/spark";
@namespace mx "library://ns.adobe.com/flex/halo";

.upStyle 
    color:      #FF0000;


.overStyle 
    color:      #009900;


.downStyle 
    color:      #00FF00;


.disabledStyle 
    color:      #666666;


</fx:Style>

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

<s:Label
    id="labelDisplay"
    styleName.up="upStyle"
    styleName.over="overStyle"
    styleName.down="downStyle"
    styleName.disabled="disabledStyle"/>

<s:Rect   includeIn="over,up" bottom="0">
    <s:fill>
        <s:SolidColor color.over="#009900" color.up="#0000FF"/>
    </s:fill>
</s:Rect>

</s:Skin>

按钮的代码如下

<s:Button label="Open Menu" id="bluebtn" skinClass="skins.HTMLBtn" />   
<s:Button label="Close Menu" id="yellowbtn" skinClass="skins.YellowSkin" />

但它会将 HTMLBtn 皮肤应用于打开菜单和关闭菜单按钮。

【问题讨论】：

我不明白：YellowSkin 是HTMLBtn 的子类吗？这种黄色是如何应用的？

【参考方案1】：

按照上面在 Flash Builder 4.6 中使用 AIR 3.4 的示例：

    <s:Button id="bluebtn" label="Open Menu" skinClass="skins.HTMLBtnBlue"/>
<s:Button id="yellowbtn" label="Close Menu"  skinClass="skins.HTMLBtnYellow"/>

我对此没有任何问题。

   Skin Class "HTMLBtnYellow":

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

<fx:Style>
    @namespace s "library://ns.adobe.com/flex/spark";
    @namespace mx "library://ns.adobe.com/flex/halo";

    .upStyle 
        color:      #FF0000;
    

    .overStyle 
        color:      #009900;
    

    .downStyle 
        color:      #00FF00;
    

    .disabledStyle 
        color:      #666666;
    

</fx:Style>

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


<s:Rect   includeIn="over,up" bottom="0">
    <s:fill>
        <s:SolidColor color.over="#009900" color.up="#F8C313"/>
    </s:fill>
</s:Rect>

<s:Label
    id="labelDisplay"
    styleName.up="upStyle"
    styleName.over="overStyle"
    styleName.down="downStyle"
    styleName.disabled="disabledStyle"/>

皮肤类“HTMLBtnBlue”：

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

<fx:Style>
    @namespace s "library://ns.adobe.com/flex/spark";
    @namespace mx "library://ns.adobe.com/flex/halo";

    .upStyle 
        color:      #FF0000;
    

    .overStyle 
        color:      #009900;
    

    .downStyle 
        color:      #00FF00;
    

    .disabledStyle 
        color:      #666666;
    

</fx:Style>

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

<s:Label
    id="labelDisplay"
    styleName.up="upStyle"
    styleName.over="overStyle"
    styleName.down="downStyle"
    styleName.disabled="disabledStyle"/>

<s:Rect   includeIn="over,up" bottom="0">
    <s:fill>
        <s:SolidColor color.over="#009900" color.up="#0000FF"/>
    </s:fill>
</s:Rect>

【讨论】：

当我使用标签属性 color.up="#F8C313" 而不是使用 styleName.up="upStyle"

时，我的问题已解决

请将您的答案发布为答案并将其标记为已解决，以便其他人可以从您的解决方案中学习。