Flutter输入框换行后自适应高度

最新推荐文章于 2024-05-14 15:17:21 发布

彩虹下的布迷

最新推荐文章于 2024-05-14 15:17:21 发布

阅读量616

点赞数 6

文章标签： flutter

本文链接：https://blog.csdn.net/weixin_43626889/article/details/136348027

版权

本文介绍了如何使用Flutter中的TextEditingController监听输入框内容变化，动态计算输入框高度，以实现输入框高度随换行自动适应的自适应高度设计。

摘要由CSDN通过智能技术生成

Flutter输入框换行后输入框高度随之增加

效果

请添加图片描述

设计思想

通过TextEditingController在build中监听输入框，输入内容后计算输入框高度然后自定义适合的值，并且改变外部容器高度达到自适应高度的目的

参考代码

//以下代码中的值只适用于案例，实际情况还需改为自己需要的实际值

//自定义输入框高度
 double inputH=25; 

 @override
  Widget build(BuildContext context) {
    _textEditingController.addListener(() {
      String textvalue=_textEditingController.text;
      final textStyle = TextStyle(fontSize: 16,fontWeight: FontWeight.bold);

      final textPainter = TextPainter(
        text: TextSpan(text:textvalue, style: textStyle),
        textDirection: TextDirection.ltr,
      );
      textPainter.layout(maxWidth: 260 * Global.widthX); // 减去/加上的数值根据自己需求调整，下同
      setState(() {
        if(textPainter.height<=25.0){ //只有一行的情况
          this.inputH=25.0;
        }else if(25.0<textPainter.height && textPainter.height<=95){ //大于一行小于等于4行的情况
          this.inputH=textPainter.height;
        }else if(textPainter.height>=95){ //大于四行后固定高度，输入框内容滑动展示
          this.inputH=95.0;
        }
      });
     
    });
	return Container();

}

Widget _bottom(){
 return SizedBox(
	height:inputH*Global.heightY+80*Global.heightY,
	child:Container(
		//输入框外部容器高度
		 constraints: BoxConstraints.tightFor(width: Global.screenWidth,height:inputH*Global.heightY+50*Global.heightY),
		 child: Container(
            constraints: BoxConstraints(
                maxHeight: 100.0,
                maxWidth: 265 * Global.widthX,
                minHeight: 20*Global.heightY,
                minWidth: 265 * Global.widthX),
            decoration: BoxDecoration(
              color: Colors.white,
              border: Border.all(  //边框，颜色以及宽度
                // color: Color(0xFFFCCCCCC),
                width: 1.0,
                color: Colors.black12
              ),
              borderRadius: BorderRadius.circular(10.0),
            ),
            margin: EdgeInsets.fromLTRB(9* Global.widthX, 0, 0, 0),
            padding: EdgeInsets.fromLTRB(5* Global.widthX,0, 0, 0),
            child: Center(

              child: TextField(
                // focusNode: _focusNode1,
                maxLines: null,
                // maxLength: 170,
                keyboardType: TextInputType.multiline,
                controller: _textEditingController,
                // textAlign: TextAlign.center,
                textAlignVertical: TextAlignVertical.center,
                decoration: InputDecoration.collapsed(

                  hintText: _hintText,

                ),
                
              ),
            ),
          ),
		 
	)
);
}