Flutter表单 Flutter表单|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.'))); } }, )), ], ), ); } }

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