Flutter表单

本文概述

• 建立表单
• 表单验证

表单是所有现代移动和Web应用程序不可或缺的一部分。它主要用于与应用程序交互以及从用户收集信息。他们可以执行许多任务, 这取决于你的业务需求和逻辑的性质, 例如对用户的身份验证, 添加用户, 搜索, 过滤, 订购, 预订等。表单可以包含文本字段, 按钮, 复选框, 单选框按钮等

建立表单

Flutter提供了一个Form小部件来创建表单。表单小部件充当容器, 它使我们能够对多个表单字段进行分组和验证。创建表单时, 必须提供GlobalKey。该密钥唯一标识表单, 并允许你在表单字段中进行任何验证。

表单窗口小部件使用子窗口小部件TextFormField来提供用户输入文本字段的功能。该小部件呈现材料设计文本字段, 还允许我们在发生验证错误时显示它们。

让我们创建一个表单。首先, 创建一个Flutter项目, 并在main.dart文件中替换以下代码。在此代码段中, 我们创建了一个名为MyCustomForm的自定义类。在此类内部, 我们将全局键定义为_formKey。该键保存一个FormState, 可用于检索表单小部件。在此类的build方法内, 我们添加了一些自定义样式, 并使用TextFormField小部件提供了表单字段, 例如姓名, 电话号码, 出生日期或仅是普通字段。在TextFormField内部, 我们使用了InputDecoration, 它提供了表单属性的外观, 例如边框, 标签, 图标, 提示, 样式等。最后, 我们添加了一个按钮来提交表单。

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final appTitle = 'Flutter Form 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.
  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(
            decoration: const InputDecoration(
              icon: const Icon(Icons.person), hintText: 'Enter your name', labelText: 'Name', ), ), TextFormField(
            decoration: const InputDecoration(
              icon: const Icon(Icons.phone), hintText: 'Enter a phone number', labelText: 'Phone', ), ), TextFormField(
            decoration: const InputDecoration(
            icon: const Icon(Icons.calendar_today), hintText: 'Enter your date of birth', labelText: 'Dob', ), ), new Container(
              padding: const EdgeInsets.only(left: 150.0, top: 40.0), child: new RaisedButton(
                child: const Text('Submit'), onPressed: null, )), ], ), );
  }
}

输出量

现在, 运行该应用程序, 你可以在Android模拟器中看到以下屏幕。该表单包含三个字段名称, 电话号码, 出生日期和提交按钮。

表单验证

验证是一种方法, 它使我们可以纠正或确认某个标准。它确保输入数据的认证。

验证表单是所有数字交互中的常见做法。为了使表单更加有效, 我们主要需要执行三个步骤。

步骤1：将Form小部件与全局键一起使用。

步骤2：使用TextFormField为输入字段提供验证器属性。

步骤3：创建一个按钮来验证表单字段并显示验证错误。

让我们用下面的例子来理解它。在上面的代码中, 我们必须在TextFormField中使用validateator()函数来验证输入属性。如果用户输入错误, 验证器函数将返回一个包含错误消息的字符串；否则, 验证函数将返回null。在验证函数中, 确保TextFormField不为空。否则, 它将返回错误消息。

可以将validator()函数编写为以下代码段：

validator: (value) {
       if (value.isEmpty) {
             return 'Please enter some text';
       }
       return null;
}, 

现在, 打开main.dart文件, 并在TextFormField小部件中添加validateator()函数。将以下代码替换为main.dart文件。

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final appTitle = 'Flutter Form 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, which 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.
  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(
            decoration: const InputDecoration(
              icon: const Icon(Icons.person), hintText: 'Enter your full name', labelText: 'Name', ), validator: (value) {
              if (value.isEmpty) {
                return 'Please enter some text';
              }
              return null;
            }, ), TextFormField(
            decoration: const InputDecoration(
              icon: const Icon(Icons.phone), hintText: 'Enter a phone number', labelText: 'Phone', ), validator: (value) {
              if (value.isEmpty) {
                return 'Please enter valid phone number';
              }
              return null;
            }, ), TextFormField(
            decoration: const InputDecoration(
            icon: const Icon(Icons.calendar_today), hintText: 'Enter your date of birth', labelText: 'Dob', ), validator: (value) {
              if (value.isEmpty) {
                return 'Please enter valid date';
              }
              return null;
            }, ), new Container(
              padding: const EdgeInsets.only(left: 150.0, top: 40.0), child: new RaisedButton(
                child: const Text('Submit'), onPressed: () {
                  // It returns true if the form is valid, otherwise returns false
                  if (_formKey.currentState.validate()) {
                    // If the form is valid, display a Snackbar.
                    Scaffold.of(context)
                        .showSnackBar(SnackBar(content: Text('Data is in processing.')));
                  }
                }, )), ], ), );
  }
}

输出量

现在, 运行该应用程序。出现以下屏幕。

在这种形式下, 如果你将任何输入字段留空, 则会收到类似以下屏幕的错误消息。