Spark TextArea或RichText自动调整大小

Question

我在这个主题上进行了大量搜索，但似乎我找到的要么过时了，要么就是行不通。

以前，在使用TextFields时，您可以将TextField设置为特定宽度，将wordWrap设置为true，然后您将获得一个根据添加的文本而更改高度的textfield。

现在我正在尝试使用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解决这个问题，我会非常感激。

- Lee Loftiss

Answer 1

整个下午都在努力解决这个问题。但是看起来，如果您设置 RichEditableText 组件的宽度并将其高度设置为未定义，则其大小会自动调整。

- Ross Henderson

---

非常感谢Ross，我遇到了这个问题，你的解决方案非常好用！ - ggkmath

Answer 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>

在这里的评论中发现，你可以使用相同的updateComplete事件在ActionScript中执行相同的操作。

- Constantiner

---

糟糕...在你提供的例子中，它是用于在输入文本时扩展文本区域。我所说的是构建一个文本区域，填充它的文本，并最终得到一个全尺寸的文本区域以及一个高度数字，以便我可以调整文本框下方的项目。 - Lee Loftiss

Answer 3

这是我在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事件不是自动调整大小操作的最佳触发器，但对我来说效果很好。

- davee44

Answer 4

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

- Fomich

Answer 5

这对我来说似乎是有效的：

<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>

- 1.21 gigawatts

Answer 6

以下是针对Spark文本区域的解决方案（它与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;

- Zaur Guliyev

Answer 7

一直在为那个 s:TextArea 愁眉苦脸，后来发现这个可以完成任务：

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

- mik

---

你没有包含 textChanged() 函数。 - 1.21 gigawatts