Flutter中创建一个带验证的表单

原文 供参考

App中经常需要用户来输入信息,比如在登录界面输入邮箱地址和密码. 为了确保应用的安全和便捷,我们需要对用户的输入进行校验. 如果用户输入信息正确,我们可以继续后续流程.如果用户输入有误, 我们可以展示一个友好的提示信息来提示用户.

如下例子中展示了如何对一个文本输入进行校验

步骤

  1. 创建一个 Form表单 并指定GlobalKey全局标识
  2. 添加一个 TextFormField 文本框,并附上校验逻辑
  3. 创建一个按钮来校验表单,并进行提交

1. 创建一个 Form表单 并指定GlobalKey全局标识

首先我们需要创建一个 Form 组件. 该组件作为一个容器会校验多个表单域.

当我们创建表单时, 我们需要指定一个GlobalKey. 通过它可以唯一确定一个 Form 组件, 同时允许我们在后续步骤中校验表单.

代码如下

// Define a Custom Form Widget
class MyCustomForm extends StatefulWidget {
  @override
  MyCustomFormState createState() {
    return MyCustomFormState();
  }
}

// Define a corresponding State class. This class will hold the data related to
// the form.
class MyCustomFormState extends State<MyCustomForm> {
  // Create a global key that will uniquely identify the Form widget and allow
  // us to validate 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 we created above
    return Form(
      key: _formKey,
      child: // We'll build this out in the next steps!
    );
  }
}

注意 使用 GlobalKey 来获取表单是一个比较推荐的做法. 而当你使用一个更复杂的组件树时, 你可以使用 Form.of 方法来访问嵌套在组件树中的表单.

2.添加一个 TextFormField 文本框,并附上校验逻辑

目前我们有了Form表单, 但是还缺少给用户输入的文本框. 这时需要使用TextFormField组件. 该组件提供了文本输入,并且能在校验错误时提示用户.

那么要如何校验用户输入呢? 可以使用TextFormField中的validator 校验方法. 如果用户输入有误, validator 方法必须返回一个String 字符串来展现错误信息. 如果输入无误, 则该方法返回为空.

如下代码中, 我们会创建一个validator校验来确保TextFormField输入非空. 如果输入为空, 则会返回友好的提示信息.

TextFormField(
  // The validator receives the text the user has typed in
  validator: (value) {
    if (value.isEmpty) {
      return 'Please enter some text';
    }
  },
);

3. 创建一个按钮来校验表单,并进行提交

我们有了表单和文本框后, 我们还需要一个按钮来提交用户的输入.

当用户想要提交表单时, 我们需要校验输入是否合法. 如果是,则提示成功. 如果输入为空, 则提示报错. 代码如下:

RaisedButton(
  onPressed: () {
    // Validate will return true if the form is valid, or false if
    // the form is invalid.
    if (_formKey.currentState.validate()) {
      // If the form is valid, display a snackbar. In the real world, you'd
      // often want to call a server or save the information in a database
      Scaffold
          .of(context)
          .showSnackBar(SnackBar(content: Text('Processing Data')));
    }
  },
  child: Text('Submit'),
);

这是如何实现的?

为了校验表单, 我们需要使用第一步中创建的 _formKey .通过 _formKey.currentState 方法来获取 FormState状态, 该状态在 Form构建时会由Flutter自动创建.

FormState类包含一个validate 校验方法. 当 validate 方法被调用时,会对表单中的每个输入项执行 validator方法. 如果都返回成功,则返回true. 如果任何一个输入项有误,则会为每个输入项展示错误信息并返回 false.

完整示例如下

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 will hold the data related to
// the form.
class MyCustomFormState extends State<MyCustomForm> {
  // Create a global key that will uniquely identify the Form widget and allow
  // us to validate 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 we created above
    return Form(
      key: _formKey,
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          TextFormField(
            validator: (value) {
              if (value.isEmpty) {
                return 'Please enter some text';
              }
            },
          ),
          Padding(
            padding: const EdgeInsets.symmetric(vertical: 16.0),
            child: RaisedButton(
              onPressed: () {
                // Validate will return true if the form is valid, or false if
                // the form is invalid.
                if (_formKey.currentState.validate()) {
                  // If the form is valid, we want to show a Snackbar
                  Scaffold.of(context)
                      .showSnackBar(SnackBar(content: Text('Processing Data')));
                }
              },
              child: Text('Submit'),
            ),
          ),
        ],
      ),
    );
  }
}

8c04669b13bcee446ffab1bc2563a443.gif
Logo
开源鸿蒙跨平台开发者社区

开源鸿蒙跨平台开发社区汇聚开发者与厂商，共建“一次开发，多端部署”的开源生态，致力于降低跨端开发门槛，推动万物智联创新。

更多推荐

Flutter 三方库 shutdown 的鸿蒙化适配指南 - 在鸿蒙系统上构建极致、透明、基于优先级分发的工业级应用退出治理与状态保存引擎

什么是 Shutdown？它是一个将“由于系统退出信号（Signal）”与“由于业务销毁回调（Handlers）”深度融合的任务中枢。由于由于。传统的。管理过程。由于由于销毁逻辑由于于由于不同由于由模块之间的耦合。同步由于由于由于。在 Flutter for OpenHarmony 的实际开发中，利用该库，我们可以实现由于由于鸿蒙应用对应的。生命周期包。管理过程。由于由于极致由于由于。它是构建“极

avatar 开源鸿蒙跨平台开发者社区

Flutter 三方库 semaphore 的鸿蒙化适配指南 - 在鸿蒙系统上构建极致、稳健、基于信号量机制的工业级资源同步与并发流治理引擎

什么是 Semaphore？它是一个将“由于并发槽位管理（Slot Management）”与“由于异步等待逻辑”深度融合的算力库。由于由于。传统的。管理过程。由于由于并发管理由于于由于对Future的由于由由无序触发。管理过程。导致由于由于由于资源由于由由于溢出。在 Flutter for OpenHarmony 的实际开发中，利用该库，我们可以实现由于由于鸿蒙应用对应的。并发包。管理过程。由于

avatar 开源鸿蒙跨平台开发者社区

Flutter 三方库 flutter_app_packager 的鸿蒙化适配指南 - 在鸿蒙系统上构建极致、自动化、全平台的桌面端安装包打包与工程分发引擎

什么是 Flutter App Packager？它不仅是一个简单的可执行文件包装器，而是一个具备深厚 OS 分发标准底座的“打包中心”。它支持针对不同操作系统的元数据注入（如应用图标、版本号、作者信息）以及针对特定包格式（如 AppImage, Portable）的物理压实。在 Flutter for OpenHarmony 的实际开发中，利用该库，我们可以让鸿蒙生态的配套工具以“零分发门槛”的

avatar 开源鸿蒙跨平台开发者社区