Flutter 进阶教学 | TextField 和 Form 玩转表单交互

2023-09-09 02:39:45

Flutter的Material组件库提供了两种强大的组件：TextField和Form，它们可以帮助你轻松创建和管理表单。TextField组件主要用于文本输入，而Form组件则负责管理和验证表单中的字段。

一、TextField：文本输入的基础组件

TextField组件是Flutter中处理文本输入的主要工具。它允许用户在应用程序中输入文本，比如姓名、地址、电子邮件等。TextField组件具有丰富的属性和方法，可以满足各种文本输入场景的需求。

1. 创建TextField组件

TextField(
  decoration: InputDecoration(
    labelText: '请输入你的姓名',
  ),
);

2. 获取和设置文本内容

TextField组件可以通过controller属性来获取和设置文本内容。controller属性是一个TextEditingController对象，它可以让你轻松地获取和设置文本内容。

final TextEditingController controller = TextEditingController();

TextField(
  controller: controller,
  decoration: InputDecoration(
    labelText: '请输入你的姓名',
  ),
);

3. 添加文本输入事件监听器

TextField组件提供了几个事件监听器，可以让你在用户输入文本时执行某些操作。比如，你可以添加一个监听器，在用户输入文本时实时更新文本内容。

TextField(
  controller: controller,
  decoration: InputDecoration(
    labelText: '请输入你的姓名',
  ),
  onChanged: (text) {
    print('当前输入的内容为：$text');
  },
);

二、Form：表单管理和验证组件

Form组件是Flutter中管理和验证表单的组件。它可以帮助你轻松地收集和验证用户输入的数据。Form组件具有丰富的属性和方法，可以满足各种表单管理和验证的需求。

1. 创建Form组件

Form(
  child: Column(
    children: [
      TextField(
        decoration: InputDecoration(
          labelText: '请输入你的姓名',
        ),
      ),
      TextField(
        decoration: InputDecoration(
          labelText: '请输入你的电子邮件地址',
        ),
      ),
      ElevatedButton(
        onPressed: () {},
        child: Text('提交'),
      ),
    ],
  ),
);

2. 表单验证

Form组件提供了便捷的表单验证功能。你可以使用Form组件的validator属性来指定表单字段的验证规则。当用户提交表单时，Form组件会自动执行验证规则，并返回验证结果。

Form(
  child: Column(
    children: [
      TextField(
        decoration: InputDecoration(
          labelText: '请输入你的姓名',
        ),
        validator: (value) {
          if (value.isEmpty) {
            return '姓名不能为空';
          }
          return null;
        },
      ),
      TextField(
        decoration: InputDecoration(
          labelText: '请输入你的电子邮件地址',
        ),
        validator: (value) {
          if (value.isEmpty) {
            return '电子邮件地址不能为空';
          }
          if (!RegExp(r'^[\w-\.]+@[\w-\.]+\.\w{2,3}').hasMatch(value)) {
            return '请输入有效的电子邮件地址';
          }
          return null;
        },
      ),
      ElevatedButton(
        onPressed: () {},
        child: Text('提交'),
      ),
    ],
  ),
);