带有皮肤的 Flex 4 TabBar 组件中的动态选项卡宽度答案

【问题标题】：Dynamic tab width in a Flex 4 TabBar component with skin带有皮肤的 Flex 4 TabBar 组件中的动态选项卡宽度
【发布时间】：2010-06-17 09:15:01
【问题描述】：

我有一个带有自定义外观的 Flex 4 TabBar 组件。在此皮肤中，项目渲染器是使用具有自定义皮肤的 ButtonBarButton 定义的。 itemrenderer 中的所有选项卡现在都具有相同的宽度。

但是，客户希望我动态设置标签宽度，因此较小的标签用于较小的标签，较大的标签用于长标签。有人知道如何调整 Tab (ButtonBarButton) 的宽度吗？

谢谢一百万！

【问题讨论】：

标签： width flex4 tabbar

【解决方案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>

【讨论】：