flutter TextField 高度问题(包括使用maxlines自适应高度以及改变textfield组件自定义高度)

2023-03-09,,

先上代码。

Container(

              color: Colors.blue,
constraints: BoxConstraints(
minHeight: 10,
maxHeight: 20 ),
child: TextField(
// maxLines: 3,
// minLines: 1,
// style: TextStyle(fontSize: 7),
decoration: InputDecoration(
contentPadding: EdgeInsets.symmetric(vertical:1),
 isCollapsed: true,
fillColor: Colors.red,
filled: true, prefixIcon: Icon(Icons.label,size: 7,),
prefixIconConstraints: BoxConstraints(),
// hintText: '请输入',
// hintStyle: TextStyle(fontSize: 16),
border: OutlineInputBorder( borderSide: BorderSide.none,
borderRadius: BorderRadius.circular(20),
)
),
),
),

首先 先说一下如何使用maxlines 高度问题。

在我们设置了maxlines之后,例如我们设置maxlines为3的时候,那么默认TextField高度会以三倍的方式显示。我们想要默认是1行,根据用户的输入量去动态改变TextField高度,直到到达我们设定的最大行数。

解决办法:就是在设置maxlines值的时候,同样加一个minlines为1,那么默认就会是1行,根据用户输入会增长到3行。这样就解决了。

那么还有个问题,如果设置了prefixIcon:icon图标之后,组件就有一个固定高度,一般都height没办法改变。如何将TextField设置成我们自己想要的高度呢。有两个办法,往下看。

第一个办法:设置外部组件的最大高度。

我们用到的是Container的BoxConstraints()。具体写法,可以看上面代码。

有4个参数maxWidth,minWidth,maxHeight,minHeight,也就是容易的最小宽度,最大宽度,最小高度,最大高度。

我们用到的是maxHeight,minHeight这两个。

详解:

当我们设置maxheight为30的时候,相对的TextField高度也就改变为30。这时候会碰到一个问题,那就是文字位置不是上下居中的。会跑偏。

这时候我们结合contentPadding: EdgeInsets.symmetric(vertical:8),  这个来用,意思文字上下各添加8像素补白,具体可自己调整像素大小。上面代码可参考。

第二个办法:设置isCollapsed为true

isConllapsed 是InputDecoration中的参数。

相当于高度包裹的意思。

通俗一点都讲就是根据你设置的字体大小来自适应高度。字体包括hintStyle和style两个,也就是提示型文字的大小,和普通用户输入文字的大小来确定,推荐两个设置成一样的。

只要设置了这个值,TextField就会根据字体大小来设置高度。配合contentPadding:EdgeInsets.all(5)来设置文字的内边距。

没有特殊要求的情况下推荐第二种方法。

flutter TextField 高度问题(包括使用maxlines自适应高度以及改变textfield组件自定义高度)的相关教程结束。

《flutter TextField 高度问题(包括使用maxlines自适应高度以及改变textfield组件自定义高度).doc》

下载本文的Word格式文档,以方便收藏与打印。