TextFormFiel 文本更新

TextFormField 是 Flutter 中用于收集用户文本输入的表单字段之一， 它提供了一种方便用户输入文本的方式，并且还可以保证用户输入的内容是合法的。

基本用法

要使用 TextFormField，您需要跟踪表单字段的当前值。 在下面的示例中，我们将表格字段保存在 name 中， 然后将其作为 TextFormField 的 “value” 属性传递。

String name = '';

TextFormField(
  decoration: InputDecoration(
    labelText: 'Name',
  ),
  validator: (value) {
    if (value.isEmpty) {
      return 'Please enter your name';
    }
    return null;
  },
  onChanged: (value) {
    setState(() {
      name = value;
    });
  },
);

在此示例中，我们还传递了 validator 方法来验证用户输入。如果用户没有输入任何文本，方法将返回 Please enter your name 以进行文本提示。

最后，我们还传递了 onChanged 回调方法，以便在用户更新文本字段时收集用户输入，并使用 setState 方法更新状态。

高级用法

TextFormField 还具有其他有用的功能，例如 autovalidateMode、controller 和 textInputAction，它们可以在处理复杂表单时提供很大的帮助。

final _formKey = GlobalKey<FormState>();

String email;
String password;

@override
Widget build(BuildContext context) {
  return Form(
    key: _formKey,
    child: Column(
      children: [
        TextFormField(
          decoration: InputDecoration(labelText: "Email"),
          keyboardType: TextInputType.emailAddress,
          validator: (val) =>
              isValidEmail(val) ? null : 'Please enter a valid email',
          onSaved: (val) => email = val,
        ),
        TextFormField(
          decoration: InputDecoration(labelText: "Password"),
          obscureText: true,
          validator: (val) =>
              isValidPassword(val) ? null : 'Please enter a valid password',
          onSaved: (val) => password = val,
          textInputAction: TextInputAction.done,
        ),
        RaisedButton(
          onPressed: () {
            if (_formKey.currentState.validate()) {
              _formKey.currentState.save();
              loginUser(email, password);
            }
          },
          child: Text("Submit"),
        )
      ],
    ),
  );
}

bool isValidEmail(String email) {
  // Validate email here
  return true;
}

bool isValidPassword(String password) {
  // Validate password here
  return true;
}

void loginUser(String email, String password) {
  // Login user here
}

在此示例中，我们使用 GlobalKey<FormState> 跟踪表单状态，并将 TextFormField 与表单验证和保存方法一起使用。

autovalidateMode 属性告诉 TextFormField 是否在用户输入时自动验证。 类型为 TextInputAction，在此示例中，我们将其设置为 done。 这使用户在输入密码后按“完成”按钮时提交表单。

最后，我们使用 RaisedButton 包装了整个表单，并使用 onPressed 方法调用 loginUser 方法来处理用户提交的数据。

总结

通过使用 TextFormField 和相关的表单验证和保存方法，我们可以轻松地为用户收集文本输入并执行各种操作。如果您正在处理复杂的表单，TextFormField 还具有许多高级功能来帮助简化代码并提高用户体验。