Flutter中登陆表单Form详解

效果图：Form表单校验

<code>import &#039;package:flutter/material.dart&#039;;

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(&quot;焦点的处理&quot;),
          centerTitle: true,
        ),
        body: const MyHomePage(),
      ),
    );
  }
}

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

  @override
  State&lt;MyHomePage&gt; createState() =&gt; _MyHomePageState();
}

class _MyHomePageState extends State&lt;MyHomePage&gt; {

  final TextEditingController _username = TextEditingController();
  final TextEditingController _password = TextEditingController();
  final GlobalKey _fromKey = GlobalKey&lt;FormState&gt;();

  @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: &quot;用户名&quot;,
                hintText: &quot;请输入用户名&quot;
              ),
              validator: (value){
                return value!.trim().isNotEmpty ? null:&quot;用户名能为空&quot;;
              },
            ),
            TextFormField(
              controller: _password,
              decoration: const InputDecoration(
                  prefixIcon: Icon(Icons.lock),
                  labelText: &quot;密码&quot;,
                  hintText: &quot;请输入密码&quot;
              ),
              validator: (value){
                return value!.trim().length &gt; 5 ? null:&quot;请输入大于六位数的密码&quot;;
              },
            ),
            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(&quot;提交表单成功&quot;);
                            }
                        },
                        child: const Padding(
                          padding: EdgeInsets.all(16.0),
                          child: Text(&quot;登陆&quot;),
                        ),
                      ),
                    ),
                  ],
                ),
            )
          ],
        ),
      )
    );
  }
}</code>

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

<code>          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(&quot;提交表单成功&quot;);
                                }
                            },
                            child: const Padding(
                              padding: EdgeInsets.all(16.0),
                              child: Text(&quot;登陆&quot;),
                            ),
                          );
                        }
                      ),
                    ),
                  ],
                ),
            )</code>