无论哪种界面框架输入文本框都是非常重要的控件, 但是发现flutter中的输入框TextField
介绍的虽然多,但是各个属性怎么组合满足需要很多文章却说不清楚, 再加上控件版本变更频繁很多功能的介绍都是比较陈旧的属性.现在就需要一个类似微信的输入文本框, 这样一个非常实用的效果flutter要如何实现?前提是尽量用已有属性,少写或不写代码.
先明确这种输入文本框有哪些功能点?
1,2,3在flutter中是非常方便的, decoration
属性可以满足几乎一切自定义样式.
4,也不麻烦, 现在的keyboardType: TextInputType.multiline,
属性已经能够比较好的支持多行文本;
5,单独功能也不麻烦,已经支持属性maxLines
指定最大行数
麻烦的是这些属性组合起来的效果,却不理想:
maxLines
. 输入框会从一开始显示指定行数的高度, 不是随着换行而增高, 这时需要同时添加minLines: 1
属性keyboardType: TextInputType.multiline,
属性, 貌似旧版本默认会用TextInputType.text
, 这样支持不了多行.decoration
中的contentPadding
属性, 结果控件高度变化后内边距的数值不对3,4其实是一个问题, 我们期望像Android中的wrap_content
属性, 字体的大小自适应,边距不受影响. 这时候需要用到InputDecoration
中的isDense
, 去掉冗余边距, 只显示指定的contentPadding
另外一个需要注意的点是, TextField的父节点千万不要是ConstrainedBox
或者指定Container
的constraints
, 现在的控件已经能够自行控制高度了!
上最终结果:
Row(
children: [
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…
原文作者:林鹿
原文链接:https://segmentfault.com/a/1190000021672726?utm_source=tag-newest
来源:思否