Question

有人知道为什么下面的代码会导致第一个标签比第二个标签宽吗？第一个框（较短的文本）宽度为21像素，第二个框为19像素。

<mx:VBox>
    <mx:HBox id="lbl1" backgroundColor="#6789ad">
        <mx:Label fontWeight="bold" color="white" text="0" />
    </mx:HBox>
    <mx:HBox id="lbl3" backgroundColor="#6789ad">
        <mx:Label fontWeight="bold" color="white" text="12" />
    </mx:HBox>
</mx:VBox>

我在Flex 3.4和Flex 3.5上运行了这个。同样但不同的是使用Flex 4，第一个框20像素，第二个19再次。

干杯汤姆

Answer 1

罪魁祸首可能是getMinimumText中的mx.controls.Label函数 - 基本上它在标签上强制执行2个字符的最小宽度（具体来说，测量任何0或1个字符标签，就像它们包含“Wj”一样）

要查看是否是这样，请尝试用“Wj”替换“12”文本，看看它们是否大小相同。

在getMinimumText中重写

SliderLabel以使最小1个字符（“W”）代替。我假设这样做是为了允许1个字符标签的居中（在滑块刻度上）。这就是所有SliderLabel所做的，所以你可以改用它。

Answer 2

如果没有在容器上设置宽度，它只会与内容需要的大小一样大。尝试在每个HBox容器上设置宽度 - 明确，如width="50"或百分比，如width="100%"中所示。百分比宽度将使HBox填充父VBox的宽度。

<mx:VBox>
    <mx:HBox id="lbl1" backgroundColor="#6789ad" width="50">
        <mx:Label fontWeight="bold" color="white" text="0" />
    </mx:HBox>
    <mx:HBox id="lbl3" backgroundColor="#6789ad" width-"50">
        <mx:Label fontWeight="bold" color="white" text="12" />
    </mx:HBox>
</mx:VBox>

或

<mx:VBox width="50">
    <mx:HBox id="lbl1" backgroundColor="#6789ad" width="100%">
        <mx:Label fontWeight="bold" color="white" text="0" />
    </mx:HBox>
    <mx:HBox id="lbl3" backgroundColor="#6789ad" width="100%">
        <mx:Label fontWeight="bold" color="white" text="12" />
    </mx:HBox>
</mx:VBox>

试一试......

Flex - 标签布局问题：较短的文字意味着更广泛的标签

2 个答案: