Flex - 火花按钮粗体标签的一部分答案

【问题标题】：Flex - Part of spark Button bold labelFlex - 火花按钮粗体标签的一部分
【发布时间】：2013-03-08 13:32:15
【问题描述】：

快速提问。

火花按钮上的部分标签是否可以加粗？

我想要一个带有“地图开/关”标签的切换按钮。打开它会将“ON”部分设置为粗体。

如果按钮本身没有过多的返工，这可能吗？

谢谢 =)

【问题讨论】：

标签： apache-flex button fonts toggle bold

【解决方案1】：

快速回答。

如果您愿意一次性使用自定义皮肤，则可以使用它。
它是这样的：

通过复制 spark.skins.spark.ToggleButtonSkin 为 ToggleButton 创建自定义外观
向下滚动到代码底部，找到 id 为 'labelDisplay' 的标签
将其替换为以下内容：

<s:HGroup gap="1" horizontalCenter="0" verticalCenter="1"
          left="10" right="10" top="2" bottom="2" verticalAlign="middle">

    <s:Label id="labelDisplay" maxDisplayedLines="1"/>
    <s:Label text=" ON" maxDisplayedLines="1" 
             fontWeight.selectedStates="bold"/>
    <s:Label text="/" maxDisplayedLines="1"/>
    <s:Label text="OFF" maxDisplayedLines="1"
             fontWeight="bold" fontWeight.selectedStates="normal"/>
</s:HGroup>

现在像这样分配您的自定义皮肤：

<s:ToggleButton label="Map" skinClass="path.to.skin.MyToggleButtonSkin"/>

如您所见，标签的第一部分仍然可以在外部设置，但 ON/OFF 部分已被烘焙到皮肤中。这是为您提供快速解决方案的折衷方案。如果您希望它真正通用，那就更难了。

【讨论】：

【解决方案2】：

更灵活的案例 - 创建自定义 ToggleButton 皮肤并使用 RichText。如果您将在 mxml 中设置标签 - 使用 html 实体。见例子：

主要应用：

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
               xmlns:s="library://ns.adobe.com/flex/spark"
               xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
    <fx:Style>
        @namespace s "library://ns.adobe.com/flex/spark";
        @namespace mx "library://ns.adobe.com/flex/mx";

        s|ToggleButton
        {
            skinClass: ClassReference("skins.ToggleButtonSkinBold");
        }

    </fx:Style>

    <s:ToggleButton id="btn" label="Map &lt;span fontWeight='bold'&gt;ON&lt;/span&gt;"
                    change="{btn.label = 'Map &lt;span fontWeight=\'bold\'&gt;' +  ((btn.selected) ? 'OFF': 'ON') + '&lt;/span&gt;'}" 
                    width="200" height="50" />

</s:Application>

在皮肤类中使用 includeInLayout=false 禁用默认 labelDisplay 组件并添加富文本组件。

.. some code
    <!-- layer 8: text -->
    <!--- @copy spark.components.supportClasses.ButtonBase#labelDisplay -->
    <s:Label id="labelDisplay"
             includeInLayout="false" visible="false" />

    <s:VGroup width="100%" height="100%" horizontalAlign="center" verticalAlign="middle">
        <s:RichText id="labelDisplayRich" />    
    </s:VGroup>


</s:SparkButtonSkin>

重写 commiteProperties 方法并更新皮肤脚本块中的富文本：

.. some code
         /**
         * @private
         */

        override protected function commitProperties():void
        {
            super.commitProperties();

            var tf:TextFlow = TextFlowUtil.importFromString(labelDisplay.text);

            if (tf.getText() != labelDisplayRich.textFlow.getText())
            {
                labelDisplayRich.textFlow = tf; 
            }

        }

【讨论】：

【解决方案3】：

为此，您可以通过在 Adobe 中手动设计两个按钮来实现此目的，1 个带有 ON 粗体，1 个带有 OFF 粗体。并制作两个带有设计按钮的皮肤。

点击之后，动态切换皮肤。

if(toggle){
   myButton.setStyle("skinClass", onButtonSkin);
}else {
   myButton.setStyle("skinClass", offButtonSkin);
}

在mx按钮中添加两个CSS样式并设置

myButton.setStyle("styleName", onButtonSkin);

【讨论】：