帶皮膚的Flex 4 TabBar組件中的動態標籤寬度

Question

我有一個帶有自定義皮膚的Flex 4 TabBar組件。在此外觀中，項目渲染器使用帶有自定義外觀的ButtonBarButton進行定義。 itemrenderer中的所有選項卡現在具有相同的寬度。

然而，客戶端希望我動態地製作標籤寬度，因此較小的標籤較小，較長的標籤較大。 有誰知道如何調整Tab（ButtonBarButton）的寬度？

非常感謝！

Answer 1

我發現有效的東西。

創建一個繼承自ButtonBarButton的自定義組件，將其稱爲CustomTabButton。

添加可綁定屬性tabWidth。 然後當我們更新tabWidth時，標籤的寬度會隨之調整。 這是你如何更新肌膚：

• 設置主機組件的自定義類CustomTabButton。

• 在SparkSkin定義中，將寬度值綁定到hostComponents屬性tabWidth。

  寬度= 「{} 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>