Flutter 中如何使用 TextField 和 TextFormField？

推荐答案

在 Flutter 中，TextField 和 TextFormField 是用于处理用户输入的常用组件。以下是它们的基本用法：

TextField 的基本用法

// www.javascriptcn.com code example
TextField(
  decoration: InputDecoration(
    labelText: 'Enter your username',
    hintText: 'Username',
    border: OutlineInputBorder(),
  ),
  onChanged: (value) {
    print('The user typed: $value');
  },
);

TextFormField 的基本用法

// www.javascriptcn.com code example
TextFormField(
  decoration: InputDecoration(
    labelText: 'Enter your password',
    hintText: 'Password',
    border: OutlineInputBorder(),
  ),
  validator: (value) {
    if (value == null || value.isEmpty) {
      return 'Please enter some text';
    }
    return null;
  },
);

使用 TextFormField 结合 Form

// www.javascriptcn.com code example
final _formKey = GlobalKey<FormState>();

Form(
  key: _formKey,
  child: Column(
    children: [
      TextFormField(
        decoration: InputDecoration(
          labelText: 'Enter your email',
          hintText: 'Email',
          border: OutlineInputBorder(),
        ),
        validator: (value) {
          if (value == null || value.isEmpty) {
            return 'Please enter some text';
          }
          return null;
        },
      ),
      ElevatedButton(
        onPressed: () {
          if (_formKey.currentState!.validate()) {
            // Process data
          }
        },
        child: Text('Submit'),
      ),
    ],
  ),
);

本题详细解读

TextField 和 TextFormField 的区别

• TextField: 是一个简单的输入框，通常用于不需要验证的场景。它提供了基本的输入功能，并且可以通过 onChanged 回调来监听用户输入的变化。

• TextFormField: 是 TextField 的扩展，通常用于需要验证的场景。它可以与 Form 组件结合使用，通过 validator 属性来验证用户输入的内容。

TextField 的主要属性

• decoration: 用于设置输入框的外观，如标签、提示文本、边框等。
• onChanged: 当用户输入内容发生变化时触发的回调。
• controller: 用于控制输入框的内容，通常用于获取或设置输入框的值。

TextFormField 的主要属性

• decoration: 与 TextField 相同，用于设置输入框的外观。
• validator: 用于验证用户输入的内容，返回一个字符串表示错误信息，返回 null 表示验证通过。
• controller: 与 TextField 相同，用于控制输入框的内容。

使用 Form 进行表单验证

Form 组件可以包含多个 TextFormField，并且可以通过 GlobalKey<FormState> 来管理表单的状态。通过调用 _formKey.currentState!.validate() 可以触发所有 TextFormField 的 validator 方法，从而进行表单验证。

示例代码解析

• TextField 示例: 展示了如何使用 TextField 来创建一个简单的输入框，并通过 onChanged 回调来监听用户输入的变化。

• TextFormField 示例: 展示了如何使用 TextFormField 来创建一个带有验证功能的输入框，并通过 validator 属性来验证用户输入的内容。

• Form 示例: 展示了如何将 TextFormField 与 Form 组件结合使用，通过 GlobalKey<FormState> 来管理表单的状态，并在用户点击按钮时触发表单验证。

通过这些示例，你可以了解如何在 Flutter 中使用 TextField 和 TextFormField 来处理用户输入，并根据需要进行表单验证。