输入表单

输入表单

TextField 用于在应用程序中输入文本，这样就可以实现创建表单、短消息应用、搜索框等等功能。Flutter 提供两个核心文本输入 widget ：TextField 和TextFormField.

如何使用文本输入 widget ？

在 React Native 里，可以使用 TextInput 组件来输入文本，它会显示一个输入框，然后通过回调函数来传递输入值。

// React Native
<TextInput
  placeholder="Enter your Password"
  onChangeText={password => this.setState({ password })}
 />
<Button title="Submit" onPress={this.validate} />

在 Flutter 中，使用 TextEditingController 类来管理 TextField widget。当用户修改文本的时候，controller 会通知监听器。

监听器读取文本和选项属性来获知用户所输入的内容。你可以通过 TextField 中的 text 属性获得用户输入的文本数据。

// Flutter
final TextEditingController _controller = TextEditingController();
      ...
TextField(
  controller: _controller,
  decoration: InputDecoration(
    hintText: 'Type something', labelText: 'Text Field '
  ),
),
RaisedButton(
  child: Text('Submit'),
  onPressed: () {
    showDialog(
      context: context,
        child: AlertDialog(
          title: Text('Alert'),
          content: Text('You typed ${_controller.text}'),
        ),
     );
   },
 ),
)

在这个例子中，当用户点击提交按钮的时候，会弹出窗口显示当前输入的文本内容。可以使用alertDialog widget 显示提示信息，TextField 的文本通过 text 属性来获得，该属性属于TextEditingController。

如何使用 Form widget 呢？

在 Flutter 中，当需要使用带有提交按钮和TextFormField组件的复合 widget 时，就会用到Form。TextFormField 内含一个onSaved 参数，它可以设置一个回调函数，当表单存储的时候会回调该函数。FormState 用于存储、重置或者验证 Form 内含的每个 FormField。你可以通过将当前表单的 context 属性赋值给 Form.of 来获得 FormState。或者在表单的构造函数里使用 GlobalKey，然后调用 GlobalKey.currentState 来获得 FormState。

final formKey = GlobalKey<FormState>();

...

Form(
  key:formKey,
  child: Column(
    children: <Widget>[
      TextFormField(
        validator: (value) => !value.contains('@') ? 'Not a valid email.' : null,
        onSaved: (val) => _email = val,
        decoration: const InputDecoration(
          hintText: 'Enter your email',
          labelText: 'Email',
        ),
      ),
      RaisedButton(
        onPressed: _submit,
        child: Text('Login'),
      ),
    ],
  ),
)

下面的示例代码展示了 Form.save() 和 formKey（这个实际上是 GlobalKey）如何被用于表单提交的。

void _submit() {
  final form = formKey.currentState;
  if (form.validate()) {
    form.save();
    showDialog(
      context: context,
      child: AlertDialog(
        title: Text('Alert'),
        content: Text('Email: $_email, password: $_password'),
      )
    );
  }
}

Android

iOS