Flex按钮外观恢复为默认值

I have a problem which involves skinned buttons returning to their default skins after certain actions occur in my application. Below I have included a partial screenshot where you can observe the problem.

我有一个问题，涉及在我的应用程序中发生某些操作后皮肤按钮返回到其默认皮肤。下面我已经包含了一个部分屏幕截图，您可以在其中观察问题。

The left button is returned to its default skin after it was clicked (the click triggers a state transition). The right button is the default skinned button. Note that my mouse is neither over nor pressing the left button.

单击左键后，左键将返回其默认外观（单击会触发状态转换）。右键是默认的蒙皮按钮。请注意，我的鼠标既没有翻过也没有按下左键。

The code for the Button Skin is as follows:

Button Skin的代码如下：

<?xml version="1.0" encoding="utf-8"?>

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

<fx:Script fb:purpose="styling">
    <![CDATA[         
        import spark.components.Group;

        static private const exclusions:Array = ["labelDisplay"];

        override public function get colorizeExclusions():Array {return exclusions;}

        override protected function initializationComplete():void
        {
            useChromeColor = true;
            super.initializationComplete();
        }            
    ]]>        
</fx:Script>

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

<s:Rect id="fill" left="1" right="1" top="1" bottom="1" radiusX="2">
    <s:fill>
        <s:LinearGradient rotation="270">
            <s:GradientEntry color.down="#545454"
                             color.over="#444444"
                             color="#343434"
                             alpha="0.95"/>
            <s:GradientEntry color.down="#767676"
                             color.over="#666666"
                             color="#565656"
                             alpha="0.95"/>
        </s:LinearGradient>
    </s:fill>
</s:Rect>

<s:Rect id="border" left="0" right="0" top="0" bottom="0" width="69" height="20" radiusX="3">
    <s:stroke>
        <s:SolidColorStroke id="borderStroke" weight="1" color="#343434" caps="round" joints="round" />
    </s:stroke>
</s:Rect>

<s:Label id="labelDisplay"
         textAlign="center" verticalAlign="middle" maxDisplayedLines="1" fontSize="12"
         left="10" right="10" verticalCenter="0"
         color="#FFFFFF" fontFamily="SegoeUI">
</s:Label>

Here's the code for the transition that is causing the problem:

以下是导致问题的转换代码：

        <s:Transition fromState="State0" toState="State1">
        <s:Sequence targets="{[contacts_nocontacts, contacts_list, button_contacts, button_add, button_delete, ac_vgroup]}">
            <s:Parallel>
                <s:Fade target="{contacts_nocontacts}" alphaFrom="1" alphaTo="0" duration="200" />
                <s:Fade target="{contacts_list}" alphaFrom="1" alphaTo="0" duration="200" />
                <s:Fade target="{button_add}" alphaFrom="1" alphaTo="0" duration="200" />
                <s:Fade target="{button_delete}" alphaFrom="1" alphaTo="0" duration="200" />
            </s:Parallel>
            <s:RemoveAction targets="{[contacts_nocontacts, contacts_list, button_add, button_delete]}" />
            <s:AddAction targets="{[button_contacts, ac_vgroup]}" />
            <s:Parallel>
                <s:Fade target="{button_contacts}" alphaFrom="0" alphaTo="1" duration="300" />
                <s:Fade target="{ac_vgroup}" alphaFrom="0" alphaTo="1" duration="300" />
            </s:Parallel>
        </s:Sequence>
    </s:Transition>

2 个解决方案

#1

It looks like the skin is being set to the spark.skins.spark.DefaultButtonSkin (not to be confused with the normal Button skin - spark.skins.spark.ButtonSkin). This happens when you set emphasized="true" on the Button or that button is being used as a default Button in a Form.

看起来皮肤被设置为spark.skins.spark.DefaultButtonSkin（不要与普通的Button skin混淆 - spark.skins.spark.ButtonSkin）。当您在Button上设置emphasized =“true”或该按钮被用作表单中的默认Button时，会发生这种情况。

See this thread for an example of how to customize the emphasized skin: http://forums.adobe.com/message/3811868

有关如何自定义强调皮肤的示例，请参阅此主题：http：//forums.adobe.com/message/3811868

#2

The problem is that the Skin is reset when focus is lost on a button that is set as Default button. It's standard behaviour, a quick fix can be found beneath (it's the same solution as the one Steven pointed out, but It's easier to have it on this actual page)

问题是，当设置为默认按钮的按钮失去焦点时，皮肤会重置。这是标准行为，可以在下面找到快速修复（它与Steven指出的解决方案相同，但在这个实际页面上更容易）

s|Button.emphasized {
    skinClass: ClassReference("MyNewButtonSkin");
}

Just attach the same button skinClass on the emphasized style property of your button. The best way to do this the quickest is to do it with above CSS. On this way you can target all the buttons at once!

只需在按钮的强调样式属性上附加相同的按钮skinClass即可。最快的方法是使用上面的CSS来做到这一点。通过这种方式，您可以立即定位所有按钮！