Spark TextArea or RichText autosize

问题:

I have done lots of searching on this subject, but it seems what I am finding is either out of date or just does not seem to work.

With TextFields in the past, you could set the TextField to a certain width, set wordWrap to true and you would end up with a textfield that changed height according to the text you added.

Now I am trying to do this with either the Spark TextArea or RichText.

I tried this HeightInLines = NAN, but that seems to be out of date.

I also tried this routine:

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;

But the mx_internal is not in the Spark components.

I am trying to do this with AS3, not MXML. If anyone has any suggestions or links that could help me figure this out using AS3, I'd really appreciate it.

回答1:

Been struggling with this all afternoon. But it looks like the RichEditableText component will autosize if you set its width and leave its height undefined.

回答2:

This works fine:

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

Found in comments here. You can do the same in ActionScript using the same updateComplete event.

回答3:

This is how I set the height of a TextArea to fit its content when used inside an ItemRenderer (e.g. for a List component):

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

      invalidateSize();
    }
}

ItemRenderer must have this property set:

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

Maybe the updateComplete event is not the optimal trigger for auto-resize actions but works fine for me.

回答4:

You can remove scrollers from TextArea's skin and it becomes autoresizable. You can download completed skin here: http://www.yumasoft.com/node/126

回答5:

Here's a solution for spark text areas (it works as mx text areas do):

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;

回答6:

This seems to work for me:

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

回答7:

Been doing the same head banging over that s:TextArea, and then found out that this gets the job done :

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