Блог

Я провел много поисков по этому вопросу, но, похоже, то, что я нахожу, либо устарело, либо просто не работает.

В прошлом для текстовых полей можно было задать текстовому полю определенную ширину, для wordWrap — значение true, и в итоге получалось текстовое поле, высота которого изменялась в соответствии с добавленным вами текстом.

Теперь я пытаюсь сделать это либо с помощью текстового поля Spark, либо с помощью 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, я был бы очень признателен.

Боролся с этим весь день. Но похоже, что компонент RichEditableText автоматически изменит размер, если вы зададите его ширину и оставите высоту неопределенной.

Это работает нормально:

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

Найдено в комментариях здесь. Вы можете сделать то же самое в ActionScript, используя то же updateComplete событие.

Вот как я устанавливаю высоту текстовой области, чтобы соответствовать ее содержимому при использовании внутри ItemRenderer (например, для компонента списка):

 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 не является оптимальным триггером для действий по автоматическому изменению размера, но у меня работает нормально.

Вы можете удалить скроллеры из обложки TextArea, и она станет автоматически изменяемой. Вы можете загрузить готовый скин здесь: http://www.yumasoft.com/node/126

Вот решение для текстовых областей 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;
  

Кажется, у меня это работает:

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

Я так же ломал голову над этим s: TextArea, а затем обнаружил, что это позволяет выполнить работу :

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