带皮肤的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>