Question

快速提问。

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

我想要一个标签为“Map ON / OFF”的toggleButton。切换它会将“ON”部分设置为粗体。

这可能是因为按钮本身的返工太多了吗？

谢谢=）

Answer 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部分已经烘烤到皮肤中。这是一个妥协，为您提供快速解决方案。如果你想要它真正通用，那就更难了。

Answer 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>

在skin类中，使用includeInLayout = false禁用默认labelDisplay组件并添加richtext组件。

.. 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方法并更新皮肤脚本块中的richtext文本：

.. 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; 
            }

        }

Answer 3

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

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

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

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

myButton.setStyle("styleName", onButtonSkin);

Flex - Spark按钮粗体标签的一部分

3 个答案: