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

【问题标题】：Flex layout - resizing "inline" text componentsFlex 布局 - 调整“内联”文本组件的大小
【发布时间】：2011-04-07 13:41:51
【问题描述】：

我正在尝试创建一个包含 3 个水平标签/文本组件的简单布局。我希望组件根据其文本内容调整大小，这将在运行时更改。

组件应如下所示：

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

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

我的问题是标签的默认宽度比它的内容宽（即使填充设置为 0），如果我设置显式宽度，则在更新绑定变量时会截断较大的数字。

所以，我想创建一个正好与它的内容一样宽的标签，即使该内容是单个字符。

在屏幕上，来自 3 个标签的文本看起来应该与在单个标签中输入的所有文本相同。

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

看起来应该很容易吧？

谢谢！斯图

【问题讨论】：

标签： apache-flex layout

【解决方案1】：

有几种解决方案：

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

【讨论】：

【解决方案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 控制从左到右流动。

更新：

如果您的意思是标签之间的间距太大，请尝试将填充（您有）、边距和水平间隙/间隙设置为 0。

如果还是不行，能否请你放一些代码或截图？

【讨论】：

是的，抱歉 - 这个问题真的不清楚。现在编辑 - 希望更有意义。