Flex - 火花的一部分Button加粗標籤

Question

快速的問題。

火花按鈕上的標籤部分是否可以加粗？

我想要一個標籤爲「Map ON/OFF」的toggleButton。將其打開將會將「ON」部分設置爲粗體。

這可能是否有可能對按鈕本身進行過多的返工？

感謝=）

Answer 1

快速的答案。

如果您願意將其設爲一次性，則可以使用自定義皮膚。
它是這樣的：

• 通過複製spark.skins.spark.ToggleButtonSkin
• 向下滾動到代碼底部爲您的切換按鈕自定義外觀，並找到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

爲此，您可以通過手動設計在Adobe，1兩個按鈕用大膽和1 OFF大膽做到這一點。 並使用設計的按鈕製作兩個皮膚。

之後點擊，動態切換皮膚。

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

在MX按鈕

在CSS中添加兩種風格，並設置

myButton.setStyle("styleName", onButtonSkin); 

Answer 3

更靈活的情況 - 創建自定義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> 

在皮膚類禁用默認labelDisplay的與includeInLayout =虛假成分，並添加富文本組件。

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

     }