Question

我正在尝试创建3个水平Label / Text组件的简单布局。我希望根据文本内容调整组件大小，这些内容会在运行时更改。

组件应如下所示：

<mx:Label text="{firstNum}" />
<mx:Label text="-" />
<mx:Label text="{secondNum}" />

输出看起来像“0-1”或“1-99”或“1000-9999”。

我的问题是Label的默认宽度比它的内容宽（即使paddings设置为0），如果我设置了显式宽度，当更新绑定变量时，将会截断更大的数字。

所以，我想创建一个完全的标签，就像它的内容一样宽，即使该内容是单个字符。

在屏幕上，3个标签中的文字看起来应该与在单个标签中输入所有文字一样。

（我需要将文本保存在单独的组件中，以便我可以单独在firstNum / secondNum上播放效果。）

似乎它应该很容易，对吧？

谢谢！斯图

Answer 1

有几种解决方案：

设置负填充
在容器中设置否定horizontalGap
移至Flex 4和Spark Label - 它没有此类问题

Answer 2

我不确定我理解你的问题，但试试这个：

Flex 3：

<mx:HBox horizontalGap="0">
   <mx:Label text="{firstNum}"/>
   <mx:Label text=" - "/>
   <mx:Label text="{secondNum}"/>
</mx:HBox>

Flex 4：

<s:Group>
   <s:layout>
      <HorizontalLayout gap="0"/>
   </s:Layout>
   <mx:Label text="{firstNum}"/>
   <mx:Label text=" - "/>
   <mx:Label text="{secondNum}"/>
</s:Group>

当然，您可以将水平间隙设置为您喜欢的任何内容。只要父容器允许，这将使Label控件从左向右流动。

更新：

如果您的意思是标签之间的间距太大，请尝试设置填充（您有），margin和horizontalGap / gap为0.

如果仍然无法解决问题，请问一些代码或截图吗？

Flex布局 - 调整“内联”文本组件的大小

2 个答案: