『Flutter』常用组件表单

原创

杨不易呀

修改于 2024-01-23 07:55:41

4820

修改于 2024-01-23 07:55:41

文章被收录于专栏：Flutter18

1.前言

在上一篇文章中，介绍完毕了常用组件中的 TextField 组件，本篇文章将继续介绍常用组件中的表单组件。

2.表单

2.1.介绍

在Flutter中，表单（Form）是一个用于数据收集和验证的容器组件。它通常与 TextField 和 FormField 等输入组件结合使用，以创建一个完整的用户输入表单。表单组件的主要作用是对输入数据进行验证和管理。

2.2.常用属性

key：GlobalKey<FormState> 类型，用于控制和访问表单的状态，如验证表单和保存表单数据。
autovalidateMode：控制表单字段的自动验证模式。例如，可以设置为 AutovalidateMode.always 让表单字段总是自动验证。
onWillPop：当用户尝试离开表单页时触发的回调，可以用于提示保存更改。
onChanged：当表单内任意一个表单字段的内容发生变化时调用的回调函数。

2.3.示例代码

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Form Example'),
        ),
        body: MyCustomForm(),
      ),
    );
  }
}

class MyCustomForm extends StatefulWidget {
  @override
  _MyCustomFormState createState() => _MyCustomFormState();
}

class _MyCustomFormState extends State<MyCustomForm> {
  final _formKey = GlobalKey<FormState>();

  @override
  Widget build(BuildContext context) {
    return Form(
      key: _formKey,
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          TextFormField(
            decoration: InputDecoration(
              hintText: 'Enter your email',
            ),
            validator: (value) {
              if (value == null || value.isEmpty) {
                return 'Please enter some text';
              }
              return null;
            },
          ),
          Padding(
            padding: const EdgeInsets.symmetric(vertical: 16.0),
            child: ElevatedButton(
              onPressed: () {
                if (_formKey.currentState!.validate()) {
                  ScaffoldMessenger.of(context)
                      .showSnackBar(SnackBar(content: Text('Processing Data')));
                }
              },
              child: Text('Submit'),
            ),
          ),
        ],
      ),
    );
  }
}

在这个例子中，创建了一个带有 GlobalKey 的表单，它包含一个 TextFormField 用于输入和验证邮箱地址，并有一个提交按钮，当表单验证通过时会显示一个提示。

2.4.运行效果

3._formKey

3.1.介绍

_formKey 在 Flutter 中通常是作为一个 GlobalKey<FormState> 实例来使用，主要用于管理 Form 组件。它提供了对表单的控制，使得开发者可以在表单外部执行一些操作，如验证表单、保存表单数据、重置表单等。

3.2._formKey 的主要用法

验证表单（Validating the Form）：通过 _formKey.currentState.validate() 可以触发表单中每个 FormField 的验证逻辑。
保存表单数据（Saving Form Data）：通过 _formKey.currentState.save() 可以调用表单中每个 FormField 的 onSaved 方法。
重置表单（Resetting the Form）：使用 _formKey.currentState.reset() 可以重置表单到初始状态，清除所有 FormField 的内容。

4.参考资料

https://api.flutter.dev/flutter/widgets/Form-class.html

End

🐤如果您对本文有任何疑问或想法，请在评论区留言，我将很乐意与您交流。
🐰您的每一条评论对我都至关重要，我会尽快给予回复。
🎈如果您觉得这篇文章对您有所启发或帮助，请不吝赞赏、收藏或分享。
🎁您的每一个动作都是对我创作的最大鼓励和支持。
👍谢谢您的阅读和陪伴！

我正在参与2024腾讯技术创作特训营第五期有奖征文，快来和我瓜分大奖！

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

2024腾讯·技术创作特训营第五期

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

2024腾讯·技术创作特训营第五期

登录后参与评论

0 条评论

热度