Comportement de redimensionnement automatique Flex TextArea - est-ce possible?

Question

Pour un composant TextArea Flex multi-lignes, vous souhaitez pouvoir continuer à saisir du texte et faire redimensionner automatiquement TextArea dans la direction verticale afin que tout le texte saisi s'affiche en même temps. Cependant, TextArea veut pousser tous les composants vers le bas dans le flux de mise en page. Au lieu de cela, vous voulez que TextArea s'étende au-dessus d'eux. Une fois l'entrée de texte terminée, TextArea devrait rétrécir et se redessiner à ses limites normales.

Answer 1

Si le conteneur dans lequel est TextArea utilise un positionnement «absolu» (comme un canevas), cela fonctionnera. Mesurez simplement textHeight sur TextArea et quand il atteint une certaine plage dans la hauteur de TextArea, augmentez la hauteur. Cependant, vous devrez toujours corriger l'ordre z, car TextArea voudra peut-être étendre derrière les autres composants.

Answer 2

Sous-classe la classe TextArea et remplacez la méthode measure() pour définir les dimensions mesurées à la taille du texte de la zone de texte. Vous pouvez également ajouter des écouteurs d'événement pour invalider la taille et la taille parente de TextArea sous-classées lors de la saisie de texte ou d'une mise en page du parent.

C'est une classe simple que j'ai créé:

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(); 
    }