Flex 4.1 RichText / RichEditableText自动调整大小

时间:2011-03-21 06:40:12

标签: flex autosize

过去,我使用了flash.text.textField对象,如下所示:

tf = textField();
tf.autoWrap = true
tf.autoSize = "left"
tf.width = 100;
tf.text = "Text that is too long to fit in the textfield, so it autowraps, automatically updating the height."
addChild(tf);
someNewObject = new MovieClip();
someNewObject.y = tf.height + 5;
addchild(someNewObject);

这样做会动态地将someNewObject放在textField下面。

我正在尝试找到一个允许我这样做的TLF组件。

我尝试使用mc.core.FTETextField。它调整大小,但不支持HTML

我尝试使用Spark TextArea,但显然,设置heightByLines = NAN的技术不再有效。

我看到有人说使用RichEditableText,因为它支持自动调整大小,但我无法弄清楚如何。

这适用于静态文本。不适用于动态或输入文字。

我正在对此进行编码,因此如果您有一些建议,请在代码中发布,而不是MXML。

感谢目前为止的答案,但UITextfield不是TLF组件,RichText的示例不会导致RichText高度随文本增长。

我需要的是一个组件,我可以设置宽度,添加TLF格式的文本,并获得组件渲染后的高度。就像添加文本时TextField一样。

3 个答案:

答案 0 :(得分:1)

很简单,您只需要创建TextFlow对象。

<fx:Declarations>
<s:TextFlow id="textFlow">
    Hello, this <s:span fontWeight="bold"> is a test</s:span> of TextFlow
</s:TextFlow>
</fx:Declarations>
<s:RichText id="richText" textFlow="{textFlow}" />

但textFlow在那里使用Flex标签。您也可以使用转换器将真正的HTML字符串转换为TextFlow,如下所示:

<fx:Script>
    <![CDATA[
        import flashx.textLayout.conversion.ITextImporter;
        import flashx.textLayout.conversion.TextConverter;

        private const importer:ITextImporter = TextConverter.getImporter(TextConverter.TEXT_FIELD_HTML_FORMAT);
        private const htmlString:String = "Hello, this <b>is a test</b> of TextFlow";

    ]]>
</fx:Script>
<s:RichText textFlow="{importer.importToFlow(htmlString)}"/>

答案 1 :(得分:0)

您可以使用mx.core.UITextField。它支持HTML。以下是文档:http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/mx/core/UITextField.html

答案 2 :(得分:0)

RichEditableText可以解决问题,但是您必须为自动包装显式设置width属性。根据我的经验,如果你将宽度设置为%100,它可能会导致一些问题(对我而言会导致一些问题),所以我建议你明确设置宽度值以确保自动换行。 RichEditableText的ASDoc解释了很多。