flutter之文本输入

2.3.2 文本框

文本框作为一个接收用户输入的组件，被广泛应用于表单构建、即时通讯、搜索等场景中。

Flutter 提供了两个开箱即用的文本框组件：TextField 和 TextFormField。

TextField

👉TextField 是最常用的文本输入组件。

TextField 组件的默认样式是带有下划线的装饰样式。如果需要自定义装饰样式（添加标签、图标、提示文本和错误文本），可以将 👉InputDecoration 应用到 TextField 的 👉decoration 属性上。如果需要完全移除下划线和标签预留空间，可以将 decoration 属性设置为 null。

TextField(
  decoration: InputDecoration(
    border: InputBorder.none,
    hintText: 'Enter a search term'
  ),
);

TextFormField

TextFormField 内部封装了一个 TextField 并被集成在表单组件 Form 中。如果需要对文本输入进行验证或者需要与其他表单组件 FormField 交互联动，可以考虑使用 TextFormField。

TextFormField(
  decoration: InputDecoration(
    labelText: 'Enter your username'
  ),
);

在某些情境中，如何响应文本内容的变化呢。例如，我们希望根据用户输入的内容来返回的搜索结果。

那么如何每次在文本内容改变时调用回调函数呢？在Flutter中，我们提供了两种选择：

1. 给 TextField 或 TextFormField 绑定 onChanged() 回调 Supply an onChanged() callback to a TextField or a TextFormField.
2. 使用 TextEditingController Use a TextEditingController.

1. 给 TextField 或 TextFormField 绑定 onChanged() 回调

每当文本内容改变时，回调函数会被触发。

在下面的示例中，每次 text 的值改变，会在控制台中打印出当前文本框的值。

TextField(
  onChanged: (String t) {
    print("input text field: $t");
  },
);

2. 使用 TextEditingController

另外一种更强大但是更复杂的方法是绑定 👉TextEditingController 作为 TextField 和 TextFormField 的 👉controller 属性。

你可以通过如下步骤，使用 👉addListener() 方法来监听控制，实现在文本更改时收到通知：

1. 创建一个 TextEditingController
2. 将 TextEditingController 绑定到 text field
3. 创建一个函数来打印最新值
4. 监听控制器的变化

创建一个 TextEditingController

创建一个 TextEditingController：

Create a TextEditingController:

// Define a custom Form widget.
class MyCustomForm extends StatefulWidget {
  @override
  _MyCustomFormState createState() => _MyCustomFormState();
}

// Define a corresponding State class.
// This class holds data related to the Form.
class _MyCustomFormState extends State<MyCustomForm> {
  // Create a text controller. Later, use it to retrieve the
  // current value of the TextField.
  final myController = TextEditingController();

  @override
  void dispose() {
    // Clean up the controller when the widget is removed from the
    // widget tree.
    myController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    // Fill this out in the next step.
  }
}

请在 TextEditingController 使用完毕时将其 dispose ，从而确保所有被这个对象所使用的资源被释放。

给 text field 绑定 TextEditingController

TextEditingController 必须绑定到 TextField 或者是 TextFormField 才能被正常的使用。一旦绑定，就能够开始监听文本框的变化。

TextField(
  controller: myController,
);

创建一个打印当前值的方法

现在，我们需要一个每当表单项变化都会运行的函数。在下面的示例中，我们会在 _MyCustomFormState 类中创建一个方法，实现打印出文本框当前值。

_printLatestValue() {
  print("Second text field: ${myController.text}");
}

监听控制器的变化

最后，需要监听 TextEditingController 并且在 text 值变化时运行 _printLatestValue() 方法。我们需要使用 👉addListener() 方法来实现这个功能。

下面的示例会在类 _MyCustomFormState 初始化的时候开始监听变化，dispose 时停止监听。

class _MyCustomFormState extends State<MyCustomForm> {
  @override
  void initState() {
    super.initState();

    // Start listening to changes.
    myController.addListener(_printLatestValue);
  }
}