Question

我们正在重构一些Flex3到Flex4代码，我遇到了Spark TabBar控件的问题。在4.5中，当将其尺寸调整到低于所有标签的宽度时，标签会缩小。我没有在Flex4上看到这一点，在做了一些谷歌搜索后我似乎无法找到解决方案。

似乎正在发生的事情是TabBar的minWidth被设置为所有按钮的总和加上它们之间的间隙。

Anythoughts？会是最有帮助的。我认为这很容易，但无法修复它。

<s:TabBar id="myTabBar" top="0" width="100%" dataProvider="{myTabs}" >
    <s:layout>
        <s:HorizontalLayout gap="1" variableColumnWidth="true" />
    </s:layout>
</s:TabBar>

更新：
虽然我不确定它是否理想，但我想出了一个解决方案。我使用了默认的TabBarSkin并进行了修改以添加一个度量方法。在测量方法中，我遍历选项卡，找到标签对象，并计算宽度。我用它来设置父组件的maxWidth。它似乎确实有效，但欢迎对此方法发表任何意见。我还拿出了上面的布局标签。

        protected override function measure():void
        {
            //TODO Auto-generated method stub
            super.measure();


            // Calculate the maximum size of the button should stretch to and then set the host Component 
            // To the maxWidth.  This is accomplished by iterating through the children of the dataGroup 
            // and then getting the label components from labelDisplay.   Once you have that then we can 
            // get the PreferredBoundsWidth and add them all up.  The left and right values are added in as 
            // that is the spacing on each side of the label.  
            var totalButtonWidth:Number = 0;
            var tab:UIComponent;
            var calculatedWidth:Number;

            for (var i:int = 0; i < dataGroup.numElements; i++)
            {
                tab = dataGroup.getElementAt(i) as UIComponent;
                calculatedWidth = 0; 
                if (tab.hasOwnProperty("labelDisplay")) 
                {
                    var tabLabel:Label = (tab["labelDisplay"] as Label); 
                    calculatedWidth = tabLabel.getPreferredBoundsWidth() + tabLabel.left + tabLabel.right; 
                }
                totalButtonWidth = totalButtonWidth + calculatedWidth;

            }

            hostComponent.maxWidth = totalButtonWidth;
            trace("totalWidth is " + totalButtonWidth);
        }

如果我记得，可以从SDK获取皮肤并修改它并重复使用它吗？

Answer 1

是的，你可以按照你在更新中所说的那样做。

但是，从头开始定义自己的皮肤比修改现有皮肤要容易得多。请查看this文档。

Flex TabBar选项卡不会调整其显示宽度以下

1 个答案: