Flex TextArea 自动调整大小行为 - 这可能吗?

发布于 2024-07-29 00:19:04 字数 166 浏览 8 评论 0原文

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

For a multi-line TextArea Flex component, want to be able to keep entering text and have the TextArea auto-resize in the vertical direction so that all the entered text is shown at once. However, TextArea wants to push any components down in the layout flow. Instead, want the TextArea to extend over on top of them. Once the text entry is done, then the TextArea should shrink back and redraw itself to its normal bounds.

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

等你爱我 2024-08-05 00:19:04

如果 TextArea 所在的容器使用“绝对”定位(如 Canvas),则这将起作用。 只需测量 TextArea 上的 textHeight,当它达到 TextArea 高度内的某个范围时,将高度调大。 不过,您仍然需要修复 z 顺序,因为 TextArea 可能想要向下拉伸到其他组件后面。

If the container the TextArea is in is using 'absolute' positioning (like a Canvas), this will work. Just measure textHeight on the TextArea and when it gets to a certain range within the TextArea's height, make the height bigger. You'll still have to fix the z-order, though, because the TextArea may want to stretch down behind other components.

终弃我 2024-08-05 00:19:04

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

Sub-class the TextArea class and override the measure() method to set the measured dimensions to the size of the text of the text area. You can also add in event listeners to invalidate the size and parent size of the sub classed TextArea on text input or a re-layout of the parent.

This is a simple class that I've created:

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();
    }
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文