Flex - 标签布局问题：较短的文本意味着较宽的标签

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

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

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

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>

尝试一下......