flutter: TextField换行自适应

不管哪一种界面框架输入文本框都是很是重要的控件, 可是发现flutter中的输入框TextField介绍的虽然多,可是各个属性怎么组合知足须要不少文章却说不清楚, 再加上控件版本变动频繁不少功能的介绍都是比较陈旧的属性.如今就须要一个相似微信的输入文本框, 这样一个很是实用的效果flutter要如何实现?前提是尽可能用已有属性,少写或不写代码.

先明确这种输入文本框有哪些功能点?

1. 可以自定义各类间距.主要是控件外边距(margin); 内间距(padding);
2. 可以自定义样式. 输入框边框(圆角(radius),描边(border),颜色); 字样(大小,颜色), 提示字样(hint);
3. 自适应. 字号变大控件高度也变高同时保持指定的内外边距.
4. 最重要的功能: 多行文本. 而且控件高度能够随着换行而增高
5. 自定义最大行数: 即高度不是随着换行无限增高, 指定控件最大行数后,文本框内容就能够滚动. 若是以数值方式指定控件最大高度很容易发生文本被截断的现象.

1,2,3在flutter中是很是方便的, decoration属性能够知足几乎一切自定义样式.

4,也不麻烦, 如今的keyboardType: TextInputType.multiline,属性已经可以比较好的支持多行文本;

5,单独功能也不麻烦,已经支持属性maxLines指定最大行数

麻烦的是这些属性组合起来的效果,却不理想:

1. 只指定maxLines. 输入框会从一开始显示指定行数的高度, 不是随着换行而增高, 这时须要同时添加minLines: 1属性
2. 最好显式的添加keyboardType: TextInputType.multiline,属性, 貌似旧版本默认会用TextInputType.text, 这样支持不了多行.
3. 单行文本时控件太高. 这是由于控件有默认高度致使内边距失效.
4. 自适应失效. 指定了decoration中的contentPadding属性, 结果控件高度变化后内边距的数值不对

3,4实际上是一个问题, 咱们指望像Android中的wrap_content属性, 字体的大小自适应,边距不受影响. 这时候须要用到InputDecoration中的isDense, 去掉冗余边距, 只显示指定的contentPadding

另一个须要注意的点是, TextField的父节点千万不要是ConstrainedBox或者指定Container的constraints, 如今的控件已经可以自行控制高度了!

上最终结果:

Row(
  children: <Widget>[
    Text('111'),
    Expanded(
      child: TextField(
        keyboardType: TextInputType.multiline,
        maxLines: 5,
        minLines: 1,
        decoration: const InputDecoration(
          hintText: '输入',
          filled: true,
          fillColor: Colors.white,
          contentPadding: const EdgeInsets.symmetric(horizontal: 10, vertical: 5),
          isDense: true,
          border: const OutlineInputBorder(
            gapPadding: 0,
            borderRadius: const BorderRadius.all(Radius.circular(4)),
            borderSide: BorderSide(
              width: 1,
              style: BorderStyle.none,
            ),
          ),
        ),
      ),
    ),
    Text('222'),
  ]
)

另外网上还有经过LayoutBuilder来实现换行自适应高度的, 也是很是强大的思路.
https://stackoverflow.com/que...