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

Question

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

33

我正在创建一个Adobe Flex应用程序，我有一个文本控件(mx:Text)，它通常用于需要多行不可编辑的文本（与Label相反，它是单行不可编辑的文本）。当我调整浏览器窗口大小来匹配文本大小时（或在浏览器窗口已经比文本小时加载它），我的文本控件没有自动换行。根据我找到的这个文档，似乎只有在指定像素绝对宽度时才会发生换行功能。这正是我想避免的。我希望文本能够自动换行以适合给定的Flash对象大小，以使其始终可见......是否有任何方法可以通过我遗漏的某些属性或其他控件来实现这一点？谢谢。

- rmeador

9个回答

5

百分比宽度和高度实际上会转换为它们的像素等效值，因此使用它们应该可以实现您所寻求的换行和相对大小。例如：

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="100%" height="100%">
    <mx:Text width="100%" height="100%" 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>

那就是说，只要有任何宽度设置，相对大小（明确的数字、百分比、基于约束的锚点——例如顶部、右侧、底部、左侧等）应该会自然地使文本换行。但这种方法在您使用的布局中不起作用吗？没有代码很难判断，但您是正确的——换行确实需要在容器上设置与宽度相关的属性。

但是，根据上下文，调整大小和换行可能有些棘手，因此如果您发现这不起作用，请尝试发布一些代码——我相信我们中的某个人将能够帮助您找出解决方案。

- Christian Nunciato

4

如果您正在尝试使MXML组件内的文本换行，请尝试以下方法：

<mx:Text id="testText"  
  width="{ this.width }"
  height="100%"   
  text="Your text here" />

你基本上是将宽度设置为组件的宽度，将高度设置为100％将允许它在缩小大小时正确地包裹。

- jerrylroberts

0

你可以尝试为父节点添加一个事件处理程序，监听 Event.RESIZE 事件，并调用 Text 对象的 validateNow() 方法（可能需要先调用 invalidateSize() 方法）。为什么这不会自动发生我无法解释。

- David Hanak

0

我认为将 VBox width = "100%" 和 Text width = "100%" 应用是最简单的方法。注意：如果 Text 是动态生成的，请不要忘记执行 text.percentWidth = 100

- hwii77

0

所以，Christian的例子只是一个带有文本元素的应用程序，但很容易搞砸布局。只需添加一个VBox并进行包装，就无法正常工作：

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="100%" height="100%">
<mx:VBox width="100%">
    <mx:Text width="100%" height="100%" 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>

- Matt Hughes

-1

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

- Jim In Texas

-2

我可以只使用mxml来完成它。结果相当丑陋，但我可以做到。

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

- Antoine Alberti

-5

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

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

- Michael

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Jon Kinsting · Accepted Answer

我曾经遇到过同样的问题。在我的情况下，我有一个 mx:Text 块（本应该自动换行），而且这个 mx:Text 对象嵌套在两个 mx:VBox 容器中。

我成功实现文本自动换行的唯一方法是同时执行以下两步操作：

将 ' width="100%" ' 属性放入每个 VBox 容器中（mx:text 所在的容器）。
将 ' width="100%" ' 属性放入此嵌套的所有 mx:Text 对象中。

非常不直观，但这对我有效。希望能对你有所帮助！

Jon Kinsting