Flutter 输入框的高度随内容增加自适应，且换行

想要做一个类似于手机编辑短信的样式，输入框的高度随内容增加，换行并且适应高度。

FLutter中的 textField有一个属性是maxLines，初始值是1，就是不管输入多少内容都只有一行不会换行，但是注意到当设置为null的时候就是行数不受限制

image

image

当maxLines值为null时，keyboardType的值就是TextInputType.multiline。这样输入框的高度动态的变化。这时的输入框是没有高度限制的，若要有个最大高度，在外层包裹一个Container，设置maxHeight和minHeigh即可。

       Container(
            constraints: BoxConstraints(
                  maxHeight: 200.0,
                  minHeight: 50.0,
                ),
                decoration: BoxDecoration(
                  color: Colors.grey[200],
                  borderRadius: BorderRadius.all(Radius.circular(10))
                ),
                padding: EdgeInsets.only(
                    left: 16.0, right: 16.0, top: 8.0, bottom: 4.0),
                child: TextField(
                  controller: _remarkTextController,
                  maxLines: null,
                  keyboardType: TextInputType.multiline,
                  autofocus: true,
                  decoration: InputDecoration.collapsed(
                    hintText: "备注",
                  ),
                ),
      )

er.gif

小伙伴们可以试试哦