简介

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
  ),
)