flutter输⼊框TextField设置⾼度以及背景⾊等样式的正确姿势flutter输⼊框TextField设置⾼度以及背景⾊等样式的正确姿势
在学习flutter的过程中，听说吐槽最多的就是输⼊框TextField的样式设置问题了，怎么设置⾼度呀？⾼度怎么⾃适应呀？这默认输⼊框⾼度怎么那么⼤呀？怎么设置背景⾊怎么设置呀？等等，其实是我们对这个控件的了解还不够⽽已，下⾯记录⼀下最常⽤的属性，以便查阅
//输⼊框控制器，⼀般⽤于获取⽂本、修改⽂本等
TextEditingController _inputController = TextEditingController();
//焦点节点，⼀般⽤于⾃动获取焦点，取消焦点以便隐藏键盘等
FocusNode _inputFocusNode = FocusNode();
//边框样式
OutlineInputBorder _outlineInputBorder = OutlineInputBorder(
gapPadding: 0,
borderSide: BorderSide(
color: [200],
),
);
TextField(
controller: _inputController,//控制器
focusNode: _inputFocusNode,//焦点
style: TextStyle(fontSize: 16, color: Colors.black87),//⽂字⼤⼩、颜⾊
maxLines: 10,//最多多少⾏
minLines: 1,//最少多少⾏
onChanged: (text) {//输⼊框内容变化回调
setState(() {});
},
decoration: InputDecoration(
fillColor: [50],//背景颜⾊，必须结合filled: true，才有效
filled: true,//重点，必须设置为true，fillColor才有效
isCollapsed: true,//重点，相当于⾼度包裹的意思，必须设置为true，不然有默认奇妙的最⼩⾼度
contentPadding: EdgeInsets.symmetric(horizontal: 8, vertical: 10),//内容内边距，影响⾼度
border: _outlineInputBorder,//边框，⼀般下⾯的⼏个边框⼀起设置
//keyboardType: TextInputType.number, //键盘类型
//obscureText: true,//密码模式
focusedBorder: _outlineInputBorder,
enabledBorder: _outlineInputBorder,
disabledBorder: _outlineInputBorder,
focusedErrorBorder: _outlineInputBorder,
errorBorder: _outlineInputBorder,
textstyle),
),
)
其实最重要的属性就是isCollapsed: true啦，表⽰⾼度包裹的意思，不然就出现默认最⼩⾼度，⽹上看的都是设置contentPadding的top值为负的等⽅法临时解决。。。
还有其他更多属性，⾃⼰查看⽂档了。
效果如下

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。