Spark TextArea或RichText自动调整大小

时间:2011-04-15 04:29:08

标签: flex flex4 textarea richtext

我已经对这个问题进行了大量的搜索,但似乎我发现它要么已经过时,要么似乎无法正常工作。

过去使用TextFields,您可以将TextField设置为特定宽度,将wordWrap设置为true,最终会得到一个根据您添加的文本更改高度的文本字段。

现在我尝试使用Spark TextArea或RichText。

我试过这个HeightInLines = NAN,但这似乎已经过时了。

我也试过这个例程:

var totalHeight:uint = 10;
this.validateNow();
var noOfLines:int = this.mx_internal::getTextField().numLines;
for (var i:int = 0; i < noOfLines; i++) 
{
     var textLineHeight:int = 
                     this.mx_internal::getTextField().getLineMetrics(i).height;
     totalHeight += textLineHeight;
}
this.height = totalHeight;

但是mx_internal不在Spark组件中。

我正在尝试使用AS3,而不是MXML。如果有人有任何建议或链接可以帮助我使用AS3解决这个问题,我真的很感激。

7 个答案:

答案 0 :(得分:3)

整个下午一直在努力。但是,如果设置宽度并保持高度未定义,RichEditableText组件将自动调整大小。

答案 1 :(得分:2)

这很好用:

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:s="library://ns.adobe.com/flex/spark" 
    xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
    <s:TextArea updateComplete="event.currentTarget.heightInLines = NaN" />
</s:Application>

在评论here中找到。您可以使用相同的updateComplete事件在ActionScript中执行相同操作。

答案 2 :(得分:1)

这是我在ItemRenderer中使用时设置TextArea的高度以适合其内容的方式(例如,对于List组件):

private function onUpdateComplete( e: Event ): void
{
    // autoresize the text area
    if ( theText ) {
      var actualNumOfLines: int = theText.textFlow.flowComposer.numLines;
      theText.heightInLines = actualNumOfLines; 

      invalidateSize();
    }
}

ItemRenderer必须设置此属性:

<s:ItemRenderer ... updateComplete="onUpdateComplete(event)>

也许updateComplete事件不是自动调整大小操作的最佳触发器,但对我来说效果很好。

答案 3 :(得分:1)

您可以从TextArea外观中删除滚动条,它可以自动调整大小。您可以在此处下载完整的皮肤:http://www.yumasoft.com/node/126

答案 4 :(得分:0)

这是火花文本区域的解决方案(它作为mx文本区域工作):

var ta_height:int;
for(var i:int=0; i < StyleableTextField(myTextArea.textDisplay).numLines; i++) {
        ta_height += StyleableTextField(myTextArea.textDisplay).getLineMetrics(i).height;
}
myTextArea.height = ta_height;

答案 5 :(得分:0)

这似乎对我有用:

<s:TextArea id="testTextArea"
            change="testTextArea_changeHandler(event)" 
            updateComplete="testTextArea_updateCompleteHandler(event)"/>

<fx:Script>
    <![CDATA[
        protected function testTextArea_changeHandler(event:TextOperationEvent):void
        {
            testTextArea.height = RichEditableText(testTextArea.textDisplay).contentHeight + 2;
        }

        protected function testTextArea_updateCompleteHandler(event:FlexEvent):void
        {
            testTextArea.height = RichEditableText(testTextArea.textDisplay).contentHeight + 2;
        }
    ]]>
</fx:Script>

答案 6 :(得分:-1)

对那个s:TextArea做了同样的打击,然后发现这可以完成工作:

<s:RichEditableText id="txtArea" left="0" right="0" backgroundColor="#F7F2F2"
                    change="textChanged()" />