Flutter TextField实践 2022-06-09 周
简介
TextField更像是Android的或者是前端的，跟iOS的UITextField差距有点大;
与TextFormField是不同的风格，是两种不同的组件。
两种输入框
InputDecoration
有一个名字为decoration参数，这个基本上是必须的一个参数，虽然提供了默认值，大多数情况都是要改的。这个决定了TextField的外观。
InputDecoration
TextEditingController
-
text属性和iOS中的UITextField一样，代表了文本的内容。预设文本，获取用户输入，都是通过设置这个text属性来实现。
-
清空用户输入，可以设置text属性来实现，不过更好的方式是通过调用clear()方法来做。
-
监听用户的输入，可以通过TextField的onChange参数来做，但是更好的方法，是设置TextEditingController的addListener()方法。Android目前也流行设置监听器，iOS那种通过delegate的方式确实不大好。当然，方便地时候，直接在onChange参数中处理用户输入监听的事，也未尝不可
-
TextEditingController是一种资源，需要调用dispose()方法进行回收。
@override
void dispose() {
// Clean up the controller when the widget is removed from the
// widget tree.
myController.dispose();
super.dispose();
}
FocusNode
这个主要是用来设置焦点，焦点游标的位置等等。
如果不是必要，可以不用管这个。
这是个自找麻烦的事。
- FocusNode是一种资源，需要调用dispose()方法进行回收。
@override
void dispose() {
// Clean up the focus node when the Form is disposed.
myFocusNode.dispose();
super.dispose();
}
清除按钮
iOS的UITextFiled组件有个自动显示或者隐藏的清除按钮。这个啥也不用做就有功能再Flutter中实现很不容易。
-
设置的位置在InputDecoration的suffixIcon参数，这是个可选的widget，所以可以添加手势之类的。
-
在手势响应中，调用TextEditingController的clear()方法，实现清除功能。
-
如果要求有内容显示，没内容，不显示，那么还需要进行用户输入监控。下面的例子就是这样的。当然setState(() {}); 放在onChange参数后面也是可以的。
//_usernameController是输入框的控制对象
_usernameController.addListener(() {
setState(() {});
});
TextFormField(
controller: _usernameController,
decoration: InputDecoration(
labelText: '用户名',
//文本框的尾部图标
suffixIcon: _usernameController.text.length > 0 ? IconButton( //如果文本长度不为空则显示清除按钮
onPressed: () {
_usernameController.clear();
},
icon: Icon(Icons.cancel, color: Colors.grey)
) : null
),
)
- 如果还要求做到像iOS的UITextField那样，获得焦点正在编辑是才显示，那就更麻烦了。还需要引入FocusNode的监听
参考文章
flutter文本输入框TextFormField后如何显示清除按钮，点击后清除输入内容？
Flutter文本输入框TextField控制器TextEditingController，TextField预设内容，获取TextField中的输入内容，兼听TextField中的内容变化
