flutter 构建一个有验证判断的表单

最新推荐文章于 2025-03-04 18:55:08 发布

computerclass

最新推荐文章于 2025-03-04 18:55:08 发布

阅读量321

点赞数

CC 4.0 BY-SA版权

分类专栏： flutter 文章标签： flutter

本文链接：https://blog.youkuaiyun.com/computerclass/article/details/115145130

flutter 专栏收录该内容

220 篇文章

订阅专栏

本文详细介绍了如何在Flutter应用中实现表单验证，包括使用Form类、FormField封装、FormState管理以及GlobalKey的应用。通过实例演示了如何创建带有验证功能的文本框和按钮，确保数据的完整性和有效性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

要实现有验证判断的表单功能，首先要做好以下几步：

在表单中，Form 类是祖先类，也就是其他表单内容应在这里面
每个单独的表单类应封装在FormField类中，如文本框，密码框
通过FormState 保存、重置、验证每一个元素
通过GLobalKey或Form.of来维护上下文状态

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final appTitle = 'Form Validation Demo';

    return MaterialApp(
      title: appTitle,
      home: Scaffold(
        appBar: AppBar(
          title: Text(appTitle),
        ),
        body: MyCustomForm(),
      ),
    );
  }
}

// Create a Form widget.
class MyCustomForm extends StatefulWidget {
  @override
  MyCustomFormState createState() {
    return MyCustomFormState();
  }
}

// Create a corresponding State class.
// This class holds data related to the form.
class MyCustomFormState extends State<MyCustomForm> {
  // Create a global key that uniquely identifies the Form widget
  // and allows validation of the form.
  //
  // Note: This is a GlobalKey<FormState>,
  // not a GlobalKey<MyCustomFormState>.
  final _formKey = GlobalKey<FormState>();

  @override
  Widget build(BuildContext context) {
    // Build a Form widget using the _formKey created above.
    return Form(
      key: _formKey,
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          TextFormField(
            validator: (value) {
              if (value.isEmpty) {
                return 'Please enter some text';
              }
              return null;
            },
          ),
          Padding(
            padding: const EdgeInsets.symmetric(vertical: 16.0),
            child: ElevatedButton(
              onPressed: () {
                // Validate returns true if the form is valid, or false
                // otherwise.
                if (_formKey.currentState.validate()) {
                  // If the form is valid, display a Snackbar.
                  ScaffoldMessenger.of(context)
                      .showSnackBar(SnackBar(content: Text('Processing Data')));
                }
              },
              child: Text('Submit'),
            ),
          ),
        ],
      ),
    );
  }
}

https://flutter.cn/docs/cookbook/forms/validation