0

こんにちはすべて私は次を持っています：

<s:ButtonBar id="tabs" y="15" left="0" height="31"
             change="VideosMenuBar_changeHandler(event)" requireSelection="true">  
    <s:layout>
        <s:HorizontalLayout gap="1" columnWidth="180" variableColumnWidth="false"   
                            />
    </s:layout>

    <s:ArrayCollection>
        <fx:String>Latest Videos</fx:String>
        <fx:String>Last Week Videos</fx:String>
        <fx:String>Last Month Videos</fx:String>
    </s:ArrayCollection>

</s:ButtonBar>

この（スパーク）ボタンバーの各ボタンの左側にアイコンを埋め込む方法を教えてもらえますか？私はすべてのウェブを検索しました！

よろしくお願いします！

4

1 に答える 1

2

ButtonBar（eg CustomButtonBarSkin）のスキンクラスを作成します

<s:ButtonBar id="tabs" y="15" left="0" height="31"
             skinClass="CustomButtonBarSkin"    
             change="VideosMenuBar_changeHandler(event)" requireSelection="true">  
    <s:layout>
        <s:HorizontalLayout gap="1" columnWidth="180" variableColumnWidth="false"   
                            />
    </s:layout>

    <s:ArrayCollection>
        <fx:String>Latest Videos</fx:String>
        <fx:String>Last Week Videos</fx:String>
        <fx:String>Last Month Videos</fx:String>
    </s:ArrayCollection>

</s:ButtonBar>

スキンクラスで、ボタンがコンポーネントとして定義されている部分を探し、のskinClass属性をButtonBarButtonカスタムスキンクラスに変更します（例CustomButtonBarButtonSkin）。

<fx:Component id="firstButton">
    <!-- <s:ButtonBarButton skinClass="spark.skins.spark.ButtonBarFirstButtonSkin" /> -->
    <s:ButtonBarButton skinClass="CustomButtonBarButtonSkin" />
</fx:Component> 
[...]

カスタムスキンクラスは、、またはButtonBarに基づいています。spark.skins.spark.ButtonBarFirstButtonSkinspark.skins.spark.ButtonBarMiddleButtonSkinspark.skins.spark.ButtonBarLastButtonSkin

カスタムButtonBarButtonスキンクラスでは、必要に応じてコンポーネントを追加できます。彼が残した画像の場合、クラスは次のようになります。

<!-- layer 8: text -->
<!---  @copy spark.components.supportClasses.ButtonBase#labelDisplay -->
<s:Image source="@Embed('bricks.png')" />
<s:Label id="labelDisplay"
         textAlign="center"
         verticalAlign="middle"
         maxDisplayedLines="1"
         horizontalCenter="0" verticalCenter="1"
         left="10" right="10" top="2" bottom="2">
</s:Label>!

そしてこれはそれがどのように見えるか

于 2012-02-09T08:07:33.523 に答える