Flutter 表单

在 Flutter 中，表单是用户输入数据的重要方式。它们通常用于登录、注册、搜索和配置等场景。本章将详细介绍如何在 Flutter 应用程序中创建和管理表单。

表单基础

表单由一组输入字段组成，如文本框、复选框、单选按钮等。Flutter 提供了多种小部件来帮助我们构建这些输入元素。下面是一些常用的表单相关的小部件：

• TextFormField：用于输入文本。
• Checkbox：用于选择或取消选择某个选项。
• Radio：用于从一组互斥选项中选择一个。
• DropdownButton：用于从下拉列表中选择一个选项。

使用 TextFormField 创建文本输入框

TextFormField 是 TextField 的包装器，提供了验证功能和更丰富的功能。以下是一个简单的示例：

// www.javascriptcn.com code example
TextFormField(
  decoration: InputDecoration(
    labelText: '用户名',
    hintText: '请输入用户名',
    border: OutlineInputBorder(),
  ),
  validator: (value) {
    if (value == null || value.isEmpty) {
      return '请输入用户名';
    }
    return null;
  },
)

使用 Checkbox 创建复选框

Checkbox 小部件允许用户选择或取消选择某个选项。以下是一个示例：

// www.javascriptcn.com code example
bool _isChecked = false;

@override
Widget build(BuildContext context) {
  return Checkbox(
    value: _isChecked,
    onChanged: (bool? newValue) {
      setState(() {
        _isChecked = newValue ?? false;
      });
    },
  );
}

使用 Radio 创建单选按钮

Radio 小部件允许用户从一组互斥选项中选择一个。以下是一个示例：

// www.javascriptcn.com code example
class MyStatefulWidget extends StatefulWidget {
  @override
  State<MyStatefulWidget> createState() => _MyStatefulWidgetState();
}

class _MyStatefulWidgetState extends State<MyStatefulWidget> {
  int _character = 1;

  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        ListTile(
          title: const Text('男性'),
          leading: Radio<int>(
            value: 1,
            groupValue: _character,
            onChanged: (int? value) {
              setState(() {
                _character = value!;
              });
            },
          ),
        ),
        ListTile(
          title: const Text('女性'),
          leading: Radio<int>(
            value: 0,
            groupValue: _character,
            onChanged: (int? value) {
              setState(() {
                _character = value!;
              });
            },
          ),
        ),
      ],
    );
  }
}

管理表单状态

在 Flutter 中，表单的状态管理可以通过 Form 和 GlobalKey 来实现。Form 小部件用于包裹整个表单，而 GlobalKey 则用于获取表单的状态。

使用 Form 包裹表单

Form 小部件可以用来包裹整个表单，并且提供了一个 key 属性，这个属性应该被赋值为一个 GlobalKey<FormState>。这样我们就可以通过这个 GlobalKey 获取到表单的状态。

// www.javascriptcn.com code example
class MyForm extends StatefulWidget {
  @override
  _MyFormState createState() => _MyFormState();
}

class _MyFormState extends State<MyForm> {
  final _formKey = GlobalKey<FormState>();

  @override
  Widget build(BuildContext context) {
    return Form(
      key: _formKey,
      child: Column(
        children: <Widget>[
          TextFormField(
            validator: (value) {
              if (value == null || value.isEmpty) {
                return '请输入用户名';
              }
              return null;
            },
          ),
          ElevatedButton(
            onPressed: () {
              if (_formKey.currentState!.validate()) {
                // 处理提交逻辑
              }
            },
            child: Text('提交'),
          ),
        ],
      ),
    );
  }
}

使用 DropdownButton 创建下拉列表

DropdownButton 小部件允许用户从一个下拉列表中选择一个选项。以下是一个示例：

// www.javascriptcn.com code example
class MyDropdown extends StatefulWidget {
  @override
  _MyDropdownState createState() => _MyDropdownState();
}

class _MyDropdownState extends State<MyDropdown> {
  String dropdownValue = '第一项';

  @override
  Widget build(BuildContext context) {
    return DropdownButton<String>(
      value: dropdownValue,
      icon: const Icon(Icons.arrow_downward),
      elevation: 16,
      style: const TextStyle(color: Colors.deepPurple),
      underline: Container(
        height: 2,
        color: Colors.deepPurpleAccent,
      ),
      onChanged: (String? newValue) {
        setState(() {
          dropdownValue = newValue!;
        });
      },
      items: <String>['第一项', '第二项', '第三项']
          .map<DropdownMenuItem<String>>((String value) {
        return DropdownMenuItem<String>(
          value: value,
          child: Text(value),
        );
      }).toList(),
    );
  }
}

验证表单

在处理表单时，验证输入是非常重要的一步。Flutter 提供了 validator 属性来实现这一点。以下是一个示例：

// www.javascriptcn.com code example
TextFormField(
  decoration: InputDecoration(
    labelText: '用户名',
    hintText: '请输入用户名',
    border: OutlineInputBorder(),
  ),
  validator: (value) {
    if (value == null || value.isEmpty) {
      return '请输入用户名';
    }
    return null;
  },
)

使用 Form 提交表单

当用户点击提交按钮时，我们可以使用 FormState 来验证表单中的所有字段是否有效。如果表单有效，则可以继续执行提交操作。

ElevatedButton(
  onPressed: () {
    if (_formKey.currentState!.validate()) {
      // 表单验证成功，执行提交逻辑
    }
  },
  child: Text('提交'),
)

表单布局

在 Flutter 中，表单的布局可以使用 Column 或 Row 小部件来实现。根据需要，你可以自由地调整表单的布局。

使用 Column 布局

Column 小部件可以垂直排列子元素，非常适合用于表单的布局。

// www.javascriptcn.com code example
Column(
  children: [
    TextFormField(
      decoration: InputDecoration(labelText: '用户名'),
    ),
    TextFormField(
      decoration: InputDecoration(labelText: '密码'),
    ),
    ElevatedButton(
      onPressed: () {},
      child: Text('提交'),
    ),
  ],
)

使用 Row 布局

Row 小部件可以水平排列子元素，适合于某些特定的布局需求。

// www.javascriptcn.com code example
Row(
  children: [
    Expanded(
      child: TextFormField(
        decoration: InputDecoration(labelText: '用户名'),
      ),
    ),
    SizedBox(width: 10),
    Expanded(
      child: TextFormField(
        decoration: InputDecoration(labelText: '密码'),
      ),
    ),
  ],
)

总结

本章介绍了 Flutter 中表单的基本概念、常用小部件、状态管理和布局。通过这些知识，你可以开始构建功能完善的表单界面，并确保其能够正确地验证用户输入。希望这些内容对你有所帮助！

接下来的章节将深入探讨更多关于 Flutter 的高级主题。