关注我们

Flutter - Forms

表单是所有现代移动和Web应用程序不可或缺的一部分。它主要用于与应用程序交互以及从用户那里收集信息。

创建表单

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

让无涯教程创建一个表单。首先，创建一个Flutter项目，并在main.dart文件中替换以下代码。在此代码段中，无涯教程创建了一个名为MyCustomForm的自定义类。在此类内，无涯教程将全局键定义为_formKey。该键包含一个FormState，可用于检索表单窗口小部件。

复制代码

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(),
      ),
    );
  }
}
// 创建一个表单小部件。
class MyCustomForm extends StatefulWidget {
  @override
  MyCustomFormState createState() {
    return MyCustomFormState();
  }
}
// 创建相应的 State 类。此类保存与表单相关的数据。
class MyCustomFormState extends State<MyCustomForm> {
 //创建唯一标识表单小部件的全局键
 //并允许验证表单。
  final _formKey = GlobalKey<FormState>();

  @override
  Widget build(BuildContext context) {
   //使用上面创建的 _formKey 构建一个表单小部件。
    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模拟器中看到以下屏幕。该表格包含三个字段名称(name)，电话号码(phone)，出生日期(birth)和提交按钮。

链接：https://www.learnfk.comhttps://www.learnfk.com/flutter/flutter-forms.html

来源：LearnFk无涯教程网

表单验证

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

步骤1:将表单小部件与全局键(global key)一起使用。

步骤2:使用TextFormField为输入字段提供验证器(validator)属性。

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

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

复制代码

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(),
      ),
    );
  }
}
// 创建一个表单小部件。
class MyCustomForm extends StatefulWidget {
  @override
  MyCustomFormState createState() {
    return MyCustomFormState();
  }
}
// 创建一个对应的 State 类，它保存与表单相关的数据。
class MyCustomFormState extends State<MyCustomForm> {
 //创建唯一标识表单小部件的全局键
 //并允许验证表单。
  final _formKey = GlobalKey<FormState>();

  @override
  Widget build(BuildContext context) {
   //使用上面创建的 _formKey 构建一个表单小部件。
    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: () {
                 //如果表单有效，则返回 true，否则返回 false
                  if (_formKey.currentState.validate()) {
                   //如果表单有效，则显示一个 Snackbar。
                    Scaffold.of(context)
                        .showSnackBar(SnackBar(content: Text('Data is in processing.')));
                  }
                },
              )),
        ],
      ),
    );
  }
}