1

簡単な質問です。

スパークボタンのラベルの一部を太字にすることはできますか?

「マップのオン/オフ」というラベルの付いたトグルボタンが欲しいです。オンにすると、「ON」の部分が太字になります。

これは、ボタン自体をあまり手直ししなくても可能ですか?

ありがとう =)

4

3 に答える 3

2

素早い回答。

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 部分はスキンに焼き付けられています。これは、迅速な解決策を提供するための妥協案です。本当に一般的なものにしたい場合は難しくなります。

于 2013-03-08T14:57:22.163 に答える
1

より柔軟なケース - カスタム 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=false で無効にし、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 メソッドをオーバーライドし、スキン スクリプト ブロックのリッチテキスト テキストを更新します。

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

        }
于 2013-03-11T14:09:22.930 に答える
0

この目的のために、Adobe で 2 つのボタンを手動で設計することでこれを行うことができます。1 つは太字 ON で、もう 1 つは太字 OFF です。デザインされたボタンで 2 つのスキンを作成します。

その後、クリックすると、スキンが動的に切り替わります。

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

mx ボタンで、CSS に 2 つのスタイルを追加して設定します

myButton.setStyle("styleName", onButtonSkin);
于 2013-03-08T13:53:39.143 に答える