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