Flex 4 中的皮肤按钮标签

Question

我在 Flex 4 中为按钮使用皮肤。皮肤按钮显示正确。

现在我希望按钮的标签做出如下响应：

• 当“RollOver”或“MouseOver”位于按钮上时，字体粗细应为粗体。

我尝试在下面的 mxml 中通过将 rollOver 属性包含到此按钮上的标签中来执行此操作，但它似乎不起作用。

我是否在正确的位置（即 Skin mxml 文件中）执行此操作？或者我应该为应用程序本身的每个按钮执行此操作？

皮肤代码：

<?xml version="1.0" encoding="utf-8"?>
<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009" 
             xmlns:s="library://ns.adobe.com/flex/spark" 
             xmlns:mx="library://ns.adobe.com/flex/mx">

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

    <fx:Script>
        <![CDATA[
            protected function labelDisplay_rollOverHandler(event:MouseEvent):void
            {
                FontWeight.BOLD;
                FontStyle.ITALIC;
            }
        ]]>
    </fx:Script>

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

    <s:BitmapImage includeIn="up" source="{getStyle('upSkin')}" width="100%" height="100%"/>

    <s:BitmapImage includeIn="over" source="{getStyle('overSkin')}" width="100%" height="100%"/>

    <s:BitmapImage includeIn="down" source="{getStyle('downSkin')}" width="100%" height="100%"/>

    <s:BitmapImage includeIn="disabled" source="{getStyle('disabledSkin')}" width="100%" height="100%"/>

    <s:Label id="labelDisplay" textAlign="right" maxDisplayedLines="1" horizontalCenter="1"
             verticalAlign="middle" verticalCenter="1" left="10" right="10" rollOver="labelDisplay_rollOverHandler(event)" />

</s:SparkSkin>

Answer 1

您可以通过更改“over”状态的 fontWeight 样式轻松完成此操作。您可以在 MXML 中执行此操作，方法是指定样式，后跟您希望应用该样式的状态，如下所示：

<s:Label id="labelDisplay" fontWeight.over="bold" textAlign="right" maxDisplayedLines="1" horizontalCenter="1"
         verticalAlign="middle" verticalCenter="1" left="10" right="10" />

希望有帮助。