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

先上代码。

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组件自定义高度）

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

第二个办法：设置isCollapsed为true

最新文章

热门文章