Flutter中登陆表单Form详解

效果图：Form表单校验

import 'package:flutter/material.dart';

main(){
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(
          title: const Text("焦点的处理"),
          centerTitle: true,
        ),
        body: const MyHomePage(),
      ),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key}) : super(key: key);

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {

  final TextEditingController _username = TextEditingController();
  final TextEditingController _password = TextEditingController();
  final GlobalKey _fromKey = GlobalKey<FormState>();

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(16.0),
      child: Form(
        key: _fromKey,// 设置globalKey，用于后面获取FormState
        autovalidateMode: AutovalidateMode.onUserInteraction, //开启自动验证显示
        child: Column(
          children: [
            TextFormField(
              controller: _username,
              decoration: const InputDecoration(
                prefixIcon: Icon(Icons.person),
                labelText: "用户名",
                hintText: "请输入用户名"
              ),
              validator: (value){
                return value!.trim().isNotEmpty ? null:"用户名能为空";
              },
            ),
            TextFormField(
              controller: _password,
              decoration: const InputDecoration(
                  prefixIcon: Icon(Icons.lock),
                  labelText: "密码",
                  hintText: "请输入密码"
              ),
              validator: (value){
                return value!.trim().length > 5 ? null:"请输入大于六位数的密码";
              },
            ),
            Padding(
                padding: const EdgeInsets.only(top: 28.0),
                child: Row(
                  children: [
                    Expanded(
                      child: ElevatedButton(
                        onPressed: (){
                            // 通过_formKey.currentState 获取FormState后，
                            // 调用validate()方法校验用户名密码是否合法，校验
                            // 通过后再提交数据。
                            if((_fromKey.currentState as FormState).validate()){
                              debugPrint("提交表单成功");
                            }
                        },
                        child: const Padding(
                          padding: EdgeInsets.all(16.0),
                          child: Text("登陆"),
                        ),
                      ),
                    ),
                  ],
                ),
            )
          ],
        ),
      )
    );
  }
}

以上的校验还可以不使用GlobalKey来实现，使用Build来构造。Form.of(context)直接得到FormState。

          Padding(
                padding: const EdgeInsets.only(top: 28.0),
                child: Row(
                  children: [
                    Expanded(
                      child: Builder(
                        builder: (context) {
                          return ElevatedButton(
                            onPressed: (){
                                // 调用validate()方法校验用户名密码是否合法，校验
                                // 通过后再提交数据。
                                if(Form.of(context)!.validate()){
                                  debugPrint("提交表单成功");
                                }
                            },
                            child: const Padding(
                              padding: EdgeInsets.all(16.0),
                              child: Text("登陆"),
                            ),
                          );
                        }
                      ),
                    ),
                  ],
                ),
            )