Flutter Form表单控件超全总结

Flutter是Google推出的移动端开发框架，其中提供了丰富的控件以方便开发，其中Form表单控件可以组合多种字段，并可以通过验证机制来确保输入数据的正确性。本文将详细介绍Flutter中的Form表单控件及其使用。

一、Form组件的作用

Form控件可以将多个表单控件组合成一个整体，并提供了表单验证、提交等相关功能，是一个方便处理表单数据的类。

二、Form的使用

在使用Form时，需要包裹在一个Scaffold中，并指定一个key。

final _formKey = GlobalKey<FormState>();
@override
Widget build(BuildContext context) {
    return Scaffold(
    key: _scaffoldKey,
    appBar: AppBar(
        title: Text('表单演示'),
    ),
    body: Form(
        key: _formKey,
        child: Column(
            children: <Widget>[
                Text('请输入用户名：'),
                TextFormField(
                    decoration: InputDecoration(
                            hintText: '请输入用户名'
                    ),
                    validator: (value) {
                        if (value.isEmpty) {
                            return '用户名不能为空';
                        }
                        return null;
                    }
                ),
                Text('请输入密码：'),
                TextFormField(
                    decoration: InputDecoration(
                            hintText: '请输入密码'
                    ),
                    obscureText: true,
                    validator: (value) {
                        if (value.isEmpty) {
                            return '密码不能为空';
                        }
                        return null;
                    }
                ),
                RaisedButton(
                    onPressed: () {
                        if (_formKey.currentState.validate()) {
                            // 验证通过
                            _scaffoldKey.currentState.showSnackBar(SnackBar(content: Text('表单验证通过')));
                        }
                    },
                    child: Text('提交'),
                )
            ],
        ),
    )
    );
}

上面的例子中创建一个包含两个TextFormField表单和一个RaisedButton按钮的表单，当点击提交按钮时，会触发_formKey.currentState.validate()函数，它会对表单中的每个TextFormField做验证，以保证各个表单的正确性。

三、用例演示

接下来，我们将会介绍常用的表单控件及其使用。

1. TextFormField文本表单控件

TextFormField为用户提供了一条带有标签的交互式文本区域，用户可以在其中输入并编辑文本内容。

Form(
    key: _formKey,
    child: TextFormField(
        decoration: InputDecoration(
            hintText: '请输入内容'
        ),
        validator: (value) {
            if (value.isEmpty) {
                return '内容不能为空';
            }
            return null;
        }
    ),
)

2. Switch开关控件

Switch开关控件提供了在两种状态之间进行切换的功能，常用于表示二元开关选择。

Form(
    key: _formKey,
    child: SwitchListTile(
        title: Text('开关'),
        value: _switchValue,
        onChanged: (value) {
            setState(() {
                _switchValue = value;
            });
        },
    ),
)

3. Radio单选按钮控件

Radio单选按钮控件允许用户从可选项中选择一个选项。

Form(
    key: _formKey,
    child: Column(
        children: <Widget>[
            Row(
                children: <Widget>[
                    Radio<int>(
                        value: 1,
                        groupValue: _radioValue,
                        onChanged: (value) {
                            setState(() {
                                _radioValue = value;
                            });
                        },
                    ),
                    Text('选项一')
                ],

            ),
            Row(
                children: <Widget>[
                    Radio<int>(
                        value: 2,
                        groupValue: _radioValue,
                        onChanged: (value) {
                            setState(() {
                                _radioValue = value;
                            });
                        },
                    ),
                    Text('选项二')
                ],

            ),
        ],
    ),
)

4. Checkbox多选框控件

Checkbox多选框控件是一个复选框，允许用户选中多个选项。

Form(
    key: _formKey,
    child: Column(
        children: <Widget>[
            CheckboxListTile(
                title: Text('选项一'),
                value: _checkValue1,
                onChanged: (value) {
                    setState(() {
                        _checkValue1 = value;
                    });
                },
            ),
            CheckboxListTile(
                title: Text('选项二'),
                value: _checkValue2,
                onChanged: (value) {
                    setState(() {
                        _checkValue2 = value;
                    });
                },
            ),
        ],
    ),
)

5. Slider滑杆控件

Slider滑杆控件是一种表示连续值范围的可定制化视图，用于从一组值中进行选择。

Form(
    key: _formKey,
    child: Slider(
        min: 0.0,
        max: 10.0,
        onChanged: (value) {
            setState(() {
                _sliderValue = value;
            });
        },
        value: _sliderValue,
    )
)

6. DropDownButton下拉框控件

DropDownButton下拉框控件提供了一个用于显示和选择选项的下拉列表。

Form(
    key: _formKey,
    child: DropdownButton(
        items: <DropdownMenuItem>[
            DropdownMenuItem(child: Text('选项一'), value: 1),
            DropdownMenuItem(child: Text('选项二'), value: 2),
            DropdownMenuItem(child: Text('选项三'), value: 3),
            DropdownMenuItem(child: Text('选项四'), value: 4),
        ],
        value: _dropdownValue,
        onChanged: (value) {
            setState(() {
                _dropdownValue = value;
            });
        },
    ),
)

7. DateTimePicker时间选择控件

DateTimePicker时间选择控件提供了选择日期和时间的功能。

Form(
    key: _formKey,
    child: DateTimePickerFormField(
        decoration: InputDecoration(
            hintText: '请选日期时间'
        ),
        inputType: InputType.time,
        format: DateFormat('HH:mm'),
        initialTime: TimeOfDay(hour: 8,minute: 30),
        editable: false,
        onChanged: (value) {
            setState(() {
                _dateTimeValue = value;
            });
        },
    ),
)

四、总结

通过本文对Flutter Form表单控件的全面介绍，我们学习到了如何使用Form组件，以及常见的表单控件如何使用。期望这些知识能对你在开发Flutter应用程序时有所帮助。