如何让 Flex 文本控件自动换行

Posted 2023-02-16

【中文标题】如何让 Flex 文本控件自动换行

【英文标题】：how to get a Flex text control to word wrap

【发布时间】：2010-10-06 23:53:43

【问题描述】：

我正在创建一个 Adob​​e Flex 应用程序，并且我有一个文本控件 (mx:Text)，据说当您需要多行不可编辑文本时使用它（而不是标签，它是单行不可编辑文本）。当我将浏览器窗口的大小调整为小于文本时（或在浏览器窗口已经较小的情况下加载它）时，我的文本控件不会换行。在咨询我发现的this doc 时，似乎只有在您指定以像素为单位的绝对宽度时才会发生自动换行功能。这正是我想要避免的。我希望文本换行以适合我的 Flash 对象的大小，以便它始终可见......有没有办法通过我缺少的某些属性或不同的控件来实现这一点？谢谢。

【参考方案1】：

我遇到了同样的问题。在我的情况下，我有一个 mx:Text 块（应该已经包装），并且那个 mx:Text 对象嵌入在两个 mx:VBox 容器中。

我让文本成功换行的唯一方法是执行以下两项操作：

将 ' ' 属性放入每个 VBox 容器（mx:text 所在的容器）。 将 ' ' 属性放入每个 mx:Text 对象（位于 VBox 的嵌套中）

非常不直观，但这对我有用。

希望对您有所帮助！

乔恩·金斯廷

【讨论】：

啊哈。我只是遇到了同样的问题，通过同样的事情解决了——在三件事上明确设置宽度——外框、内框和文本对象。

【参考方案2】：

百分比宽度和高度实际上解析为它们的像素等效值，因此使用它们应该可以实现您正在寻找的环绕和相对大小。例如：

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"  >
    <mx:Text   text="Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." />
</mx:Application>

也就是说，只要有任何类型的宽度设置，相对大小（明确的数字、百分比、基于约束的锚点 - 例如，顶部、右侧、底部、左侧 - 等）应该会导致文本自然包裹。这种方法不适用于您使用的布局吗？没有一些代码，很难说，但你是对的——包装确实需要在容器上设置一个与宽度相关的属性。

不过，调整大小和换行可能有点棘手，具体取决于上下文，所以如果您发现这不起作用，请尝试发布一些代码——我相信我们中的一个人能够帮助您解决这个问题出去。

【参考方案3】：

如果您试图让文本换行在 MXML 组件中工作，请尝试以下操作：

<mx:Text id="testText"  
  
     
  text="Your text here" />

您基本上是将宽度设置为组件的宽度，并将高度设置为 100% 将允许它在缩小尺寸时正确换行。

【参考方案4】：

您可以尝试将事件处理程序添加到 Event.RESIZE 的父节点，并调用 Text 对象的 validateNow() 方法。 （可能之前有一个invalidateSize() 电话。）为什么这不会自动发生，我不知道。

【参考方案5】：

我认为应用 VBox width = "100%" 和 Text width = "100%" 是最简单的方法。注意：如果Text是动态生成的，别忘了做text.percentWidth = 100

【参考方案6】：

因此，Christian 的示例只是一个内部带有 Text 元素的应用程序，但是很容易搞砸布局。只需在其间添加一个 VBox 并包装 not 工作：

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"  >
<mx:VBox >
    <mx:Text   text="Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." />    
</mx:VBox>
</mx:Application>

【参考方案7】：

尝试在您的文本字段中设置 htmlText="true"。

【参考方案8】：

我可以只使用 mxml 来做到这一点。结果很丑，但我可以做到。

<s:Group id="propDisplay" >
    <mx:Text id="key" left="0" text="data.key:"/>
    <mx:Text left="key.width" maxWidth="propDisplay.width - key.width" 
                             text="data.value" />
</s:Group>

【参考方案9】：

render="invalidateSize();validateNow();
'component id'.mx_internal::getTextField().wordWrap=true"

将此添加到您的文本组件中。