无论哪种界面框架输入文本框都是非常重要的控件, 但是发现flutter中的输入框TextField介绍的虽然多,但是各个属性怎么组合满足需要很多文章却说不清楚, 再加上控件版本变更频繁很多功能的介绍都是比较陈旧的属性.现在就需要一个类似微信的输入文本框, 这样一个非常实用的效果flutter要如何实现?前提是尽量用已有属性,少写或不写代码.
先明确这种输入文本框有哪些功能点?
1,2,3在flutter中是非常方便的, decoration属性可以满足几乎一切自定义样式.
4,也不麻烦, 现在的keyboardType: TextInputType.multiline,属性已经能够比较好的支持多行文本;
5,单独功能也不麻烦,已经支持属性maxLines指定最大行数
麻烦的是这些属性组合起来的效果,却不理想:
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/questions/51205333/flutter-textfield-that-auto-expands-when-text-is-entered-and-then-starts-scrolli/54215431#54215431
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持亿速云。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。