width - スキン付き Flex 4 TabBar コンポーネントの動的タブ幅

Question

カスタム スキンを持つ Flex 4 TabBar コンポーネントがあります。このスキンでは、アイテム レンダラーは、カスタム スキンを持つ ButtonBarButton で定義されます。itemrenderer のすべてのタブが同じ幅になりました。

ただし、クライアントはタブの幅を動的に作成することを望んでいるため、小さなラベルには小さなタブ、長いラベルには大きなタブを使用します。Tab (ButtonBarButton) の幅を調整する方法を知っている人はいますか?

どうもありがとう！

Answer 1

うまくいくものを見つけました。

ButtonBarButton から継承するカスタム コンポーネントを作成し、それを CustomTabButton と呼びます。

バインド可能なプロパティ tabWidthを追加します。次に、tabWidth を更新すると、タブの幅が調整されます。スキンを更新する方法は次のとおりです。

• ホスト コンポーネントをカスタム クラス CustomTabButton に設定します。

• SparkSkin 定義で、幅の値を hostComponents プロパティの tabWidth にバインドします。

  width="{hostComponent.tabWidth}"

スキンは次のようになります。

<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009"
                 xmlns:mx="library://ns.adobe.com/flex/mx"
                 xmlns:s="library://ns.adobe.com/flex/spark"
                 xmlns:fb="http://ns.adobe.com/flashbuilder/2009"
                 minHeight="54"
                 width="{hostComponent.tabWidth}"
                 xmlns:tabbar="be.boulevart.project.components.tabbar.*">

        <!-- host component -->
        <fx:Metadata>
            <![CDATA[ 
            [HostComponent("be.boulevart.project.components.tabbar.CustomTabButton")]
            ]]>
        </fx:Metadata>