Flex TextArea auto-resize поведение - это возможно?

Question

Для многострочного компонента TextArea Flex вы хотите иметь возможность вводить текст и автоматически изменять размер TextArea в вертикальном направлении, чтобы сразу отображался весь введенный текст. Тем не менее, TextArea хочет вытолкнуть любые компоненты в потоке макета. Вместо этого нужно, чтобы TextArea расширялась поверх них. После ввода текста текст TextArea должен сжиматься и перерисовываться до нормальных границ.

Answer 1

Если контейнер, в котором находится TextArea, использует «абсолютное» позиционирование (например, Canvas), это сработает. Просто измерьте textHeight на TextArea, и когда он достигнет определенного диапазона в пределах высоты TextArea, увеличьте высоту. Вам все равно придется исправить z-порядок, потому что TextArea может захотеть растянуть за другими компонентами.

Answer 2

Подкласс класса TextArea и переопределите метод measure(), чтобы установить измеренные размеры в размере текста текстовой области. Вы также можете добавить в прослушиватели событий недействительность размера и родительского размера подкласса TextArea при вводе текста или повторной компоновке родительского элемента.

Это простой класс, который я создал:

public class AutoAdjustTextArea extends TextArea{ 

///////////////////////////////////////////////// 
//Constructor Method///////////////////////////// 
///////////////////////////////////////////////// 
    public function AutoAdjustTextArea():void{ 
     super.addEventListener(FlexEvent.ADD, this.invalidateSizeOnEvent, false, 0, true); 
     super.addEventListener(Event.CHANGE, this.invalidateSizeOnEvent, false, 0, true); 
     super.addEventListener(TextEvent.TEXT_INPUT, this.invalidateSizeOnEvent, false, 0, true); 
     super.addEventListener(ResizeEvent.RESIZE, this.invalidateSizeOnEvent, false, 0, true); 
    } 


///////////////////////////////////////////////// 
//Set Methods//////////////////////////////////// 
///////////////////////////////////////////////// 
    override public function set text(value:String):void{ 
     super.text = value; 
     this.invalidateSizeOnEvent(); 
    } 


///////////////////////////////////////////////// 
//Measure Methods//////////////////////////////// 
///////////////////////////////////////////////// 
    override protected function measure():void{ 

    //Calls the super method 
     super.measure(); 

    //Calls to ensure this is validated 
     super.validateNow(); 
     super.textField.validateNow(); 

    //Grabs the min and max height values 
     var minHeight:Number = super.minHeight; 
     var maxHeight:Number = super.maxHeight; 

    //Grabs the height of the text 
     var textHeight:Number = super.textField.textHeight + 4;//+4 for the two pixel gutter on the top and bottom 

    //Calculates the preferredHeight 
     var preferredHeight:Number = textHeight; 
     if(isNaN(minHeight) == false && preferredHeight < minHeight) 
      preferredHeight = minHeight; 
     else if(isNaN(maxHeight) == false && preferredHeight > maxHeight) 
      preferredHeight = maxHeight; 

    //Sets the measured dimensions 
     super.measuredHeight = preferredHeight; 
    } 


///////////////////////////////////////////////// 
//Event Listener Methods///////////////////////// 
///////////////////////////////////////////////// 
    private function invalidateSizeOnEvent(event:Event = null):void{ 
     super.invalidateProperties(); 
     super.invalidateSize(); 
     super.invalidateParentSizeAndDisplayList(); 
    }