flutter TextField换行自适应的实现
无论哪种界面框架输入文本框都是非常重要的控件,但是发现flutter中的输入框TextField介绍的虽然多,但是各个属性怎么组合满足需要很多文章却说不清楚,再加上控件版本变更频繁很多功能的介绍都是比较陈旧的属性.现在就需要一个类似微信的输入文本框,这样一个非常实用的效果flutter要如何实现?前提是尽量用已有属性,少写或不写代码.
先明确这种输入文本框有哪些功能点?
- 能够自定义各种间距.主要是控件外边距(margin);内间距(padding);
- 能够自定义样式.输入框边框(圆角(radius),描边(border),颜色);字样(大小,颜色),提示字样(hint);
- 自适应.字号变大控件高度也变高同时保持指定的内外边距.
- 最重要的功能:多行文本.并且控件高度可以随着换行而增高
- 自定义最大行数:即高度不是随着换行无限增高,指定控件最大行数后,文本框内容就可以滚动.如果以数值方式指定控件最大高度很容易发生文本被截断的现象.
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:constInputDecoration( hintText:'输入', filled:true, fillColor:Colors.white, contentPadding:constEdgeInsets.symmetric(horizontal:10,vertical:5), isDense:true, border:constOutlineInputBorder( gapPadding:0, borderRadius:constBorderRadius.all(Radius.circular(4)), borderSide:BorderSide( width:1, style:BorderStyle.none, ), ), ), ), ), Text('222'), ] )
另外网上还有通过LayoutBuilder来实现换行自适应高度的,也是非常强大的思路.
https://stackoverflow.com/questions/51205333/flutter-textfield-that-auto-expands-when-text-is-entered-and-then-starts-scrolli/54215431#54215431
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。
声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。