Flex TextArea 自动调整大小行为 - 这可能吗？答案

【问题标题】：Flex TextArea auto-resize behavior - is this possible?Flex TextArea 自动调整大小行为 - 这可能吗？
【发布时间】：2009-07-24 18:01:17
【问题描述】：

对于多行 TextArea Flex 组件，希望能够继续输入文本并让 TextArea 在垂直方向上自动调整大小，以便一次显示所有输入的文本。但是，TextArea 想要在布局流中下推任何组件。相反，希望 TextArea 在它们之上延伸。文本输入完成后，TextArea 应该收缩并重新绘制到其正常边界。

【问题讨论】：

标签： apache-flex textarea autoresize

【解决方案1】：

如果 TextArea 所在的容器使用“绝对”定位（如画布），这将起作用。只需测量 TextArea 上的 textHeight ，当它到达 TextArea 高度内的某个范围时，将高度变大。不过，您仍然需要修复 z 顺序，因为 TextArea 可能希望在其他组件之后向下延伸。

【讨论】：

【解决方案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();
    }

【讨论】：