第8章：表单与用户输入

简要说明

在本章中，我们将学习如何处理用户输入和表单数据。表单是应用程序中与用户交互的重要组成部分，Flutter 提供了丰富的组件来帮助我们构建和管理表单。我们将深入探讨常用的表单组件、表单验证以及如何提交表单数据。

关键知识点

1. 常用表单组件

1.1 TextField

TextField 是 Flutter 中最常用的文本输入组件。它允许用户输入单行或多行文本。

TextField(
  decoration: InputDecoration(
    labelText: '用户名',
    hintText: '请输入用户名',
  ),
  onChanged: (value) {
    // 处理输入变化
  },
);

1.2 Checkbox

Checkbox 用于允许用户选择一个或多个选项。

bool isChecked = false;

Checkbox(
  value: isChecked,
  onChanged: (bool? value) {
    setState(() {
      isChecked = value!;
    });
  },
);

1.3 Radio

Radio 用于允许用户从一组选项中选择一个。

enum Gender { male, female }

Gender selectedGender = Gender.male;

Column(
  children: <Widget>[
    RadioListTile<Gender>(
      title: Text('男'),
      value: Gender.male,
      groupValue: selectedGender,
      onChanged: (Gender? value) {
        setState(() {
          selectedGender = value!;
        });
      },
    ),
    RadioListTile<Gender>(
      title: Text('女'),
      value: Gender.female,
      groupValue: selectedGender,
      onChanged: (Gender? value) {
        setState(() {
          selectedGender = value!;
        });
      },
    ),
  ],
);

2. 表单验证

表单验证是确保用户输入数据符合预期的重要步骤。Flutter 提供了多种方式来实现表单验证。

2.1 使用 Form 和 TextFormField

Form 组件可以包含多个 TextFormField，并且可以通过 FormState 来管理表单的状态和验证。

final _formKey = GlobalKey<FormState>();

Form(
  key: _formKey,
  child: Column(
    children: <Widget>[
      TextFormField(
        decoration: InputDecoration(labelText: '用户名'),
        validator: (value) {
          if (value == null || value.isEmpty) {
            return '请输入用户名';
          }
          return null;
        },
      ),
      ElevatedButton(
        onPressed: () {
          if (_formKey.currentState!.validate()) {
            // 表单验证通过
          }
        },
        child: Text('提交'),
      ),
    ],
  ),
);

2.2 自定义验证逻辑

除了内置的验证器，你还可以编写自定义的验证逻辑。

TextFormField(
  decoration: InputDecoration(labelText: '密码'),
  validator: (value) {
    if (value == null || value.isEmpty) {
      return '请输入密码';
    }
    if (value.length < 6) {
      return '密码长度至少为6个字符';
    }
    return null;
  },
);

3. 表单数据提交

表单数据提交通常发生在用户点击提交按钮时。我们可以通过 FormState 来获取表单数据并处理提交逻辑。

final _formKey = GlobalKey<FormState>();
final _usernameController = TextEditingController();
final _passwordController = TextEditingController();

Form(
  key: _formKey,
  child: Column(
    children: <Widget>[
      TextFormField(
        controller: _usernameController,
        decoration: InputDecoration(labelText: '用户名'),
        validator: (value) {
          if (value == null || value.isEmpty) {
            return '请输入用户名';
          }
          return null;
        },
      ),
      TextFormField(
        controller: _passwordController,
        decoration: InputDecoration(labelText: '密码'),
        obscureText: true,
        validator: (value) {
          if (value == null || value.isEmpty) {
            return '请输入密码';
          }
          if (value.length < 6) {
            return '密码长度至少为6个字符';
          }
          return null;
        },
      ),
      ElevatedButton(
        onPressed: () {
          if (_formKey.currentState!.validate()) {
            // 表单验证通过，处理提交逻辑
            String username = _usernameController.text;
            String password = _passwordController.text;
            // 提交数据
          }
        },
        child: Text('提交'),
      ),
    ],
  ),
);

总结

在本章中，我们学习了如何使用 Flutter 中的常用表单组件（如 TextField、Checkbox、Radio 等）来处理用户输入。我们还探讨了如何进行表单验证以及如何提交表单数据。这些知识将帮助你在 Flutter 应用中构建功能强大且用户友好的表单。

在下一章中，我们将进一步探讨如何与后端服务进行交互，处理网络请求和数据存储。