如何将Flex文本控件转换为自动换行

时间:2009-02-11 18:44:24

标签: flex text word-wrap

我正在创建一个Adobe Flex应用程序,我有一个Text控件(mx:Text),当你需要多行不可编辑的文本时(而不是Label,它是单行不可编辑的文本),它应该被使用。当我将浏览器窗口调整为小于文本(或者在浏览器窗口已经较小时加载它)时,我的文本控件不会换行。在咨询我发现的this doc之后,如果指定绝对宽度(以像素为单位),似乎只会发生自动换行功能。这正是我想要避免的。我希望文本换行以适应我的Flash对象的大小,以便它始终可见...有没有办法实现这一点,通过一些我缺少的属性或者可能是一个不同的控件?感谢。

9 个答案:

答案 0 :(得分:25)

我有同样的问题。在我的情况下,我有一个mx:文本块(应该已经包装),并且mx:Text对象嵌入在两个mx:VBox容器中。

我成功包装文本的唯一方法是同时执行以下操作:

  1. 将'width =“100%”'属性放入EACH VBox容器(mx:text所在的容器中)。
  2. 将'width =“100%”'属性放入EACH mx:Text对象(驻留在VBox的嵌套中)
  3. 非常不直观,但这对我有用。

    我希望这会对你有所帮助!

    Jon Kinsting

答案 1 :(得分: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>

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

调整大小和包装可能有点棘手,但取决于上下文,所以如果你发现这不起作用,请尝试发布一些代码 - 我相信我们中的一个人能够帮助你解决它进行。

答案 2 :(得分:4)

如果您正试图让文本换行在MXML组件中工作,请尝试以下方法:

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

您基本上将宽度设置为组件的宽度,将高度设置为100%将允许在缩小尺寸时正确包裹。

答案 3 :(得分:0)

您可以尝试将事件处理程序添加到Event.RESIZE的父节点,并调用Text对象的validateNow()方法。 (可能之前是invalidateSize()电话。)为什么这不会自动发生我无法分辨。

答案 4 :(得分:0)

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

答案 5 :(得分:0)

所以Christian的例子只是一个带有Text元素的应用程序,但它很容易搞砸布局。只需在中间添加一个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>

答案 6 :(得分:-1)

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

答案 7 :(得分:-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>

答案 8 :(得分:-5)

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

将其添加到文本组件中。