记录flutter---form表单验证

阐述

第一次接触flutter，难免啥都记不住，这次就相当于写个案例，存放在这，啥时候用到是时候在这个基础上修改，在论坛上搜索不到太多关于flutter的错误解决，只能自己挖一坑填一坑了，太难了。看看效果图。

是不是觉得很简单？可能是吧，，，一切皆组件，有时候就是觉得和div没啥区别。。。。。。。。

import 'package:flutter/material.dart';

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

  @override
  State<LoginPage> createState() => _LoginPageState();
}

class _LoginPageState extends State<LoginPage> {
  //通过controll来拿到input中的数据
  TextEditingController _unameController = TextEditingController();
  TextEditingController _pwdController = TextEditingController();
  GlobalKey _formKey = GlobalKey<FormState>();
    //抽离表单
  Widget formWidget() {
    return Form(
      key: _formKey, //设置globalKey，用于后面获取FormState
      //添加自动校验
      // autovalidateMode: AutovalidateMode.onUserInteraction,
      child: Column(
        children: [
          TextFormField(
            autofocus: true,
            controller: _unameController,
            decoration: InputDecoration(
              //设置x清除
              suffixIcon: IconButton(
                icon: Icon(Icons.clear),
                onPressed: () {
                  setState(() {
                    _unameController.text = " ";
                  });
                },
              ),
              labelText: "用户名",
              hintText: "用户名或邮箱",
              icon: Icon(Icons.person),
            ),
            // 校验用户名
            validator: (v) {
              return v!.trim().isNotEmpty ? null : "用户名不能为空";
            },
          ),
          TextFormField(
            controller: _pwdController,
            decoration: InputDecoration(
              labelText: "密码",
              hintText: "您的登录密码",
              icon: Icon(Icons.lock),
            ),
            obscureText: true,
            //校验密码
            validator: (v) {
              return v!.trim().length > 5 ? null : "密码不能少于6位";
            },
          ),
          // 登录按钮
          Padding(
            padding: const EdgeInsets.only(top: 28.0),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                ElevatedButton(
                  child: Padding(
                    padding: const EdgeInsets.all(8.0),
                    child: Text(
                      "登录",
                      style: TextStyle(fontSize: 26),
                    ),
                  ),
                  onPressed: () {
                    // 通过_formKey.currentState 获取FormState后，
                    // 调用validate()方法校验用户名密码是否合法，校验
                    // 通过后再提交数据。
                    print(_formKey.currentState);
                    if ((_formKey.currentState as FormState).validate()) {
                      print(_unameController.text);
                      print(_pwdController.text);
                      // Navigator.of(context).pushNamed("main");
                    }
                  },
                ),
                SizedBox(width: 20),
                ElevatedButton(
                  child: Padding(
                    padding: const EdgeInsets.all(8.0),
                    child: Text(
                      "注册",
                      style: TextStyle(fontSize: 26),
                    ),
                  ),
                  onPressed: () {
                    // 通过_formKey.currentState 获取FormState后，
                    // 调用validate()方法校验用户名密码是否合法，校验
                    // 通过后再提交数据。
                    print(_formKey.currentState);
                    if ((_formKey.currentState as FormState).validate()) {
                      //获取input中的数据，通过使用controll
                      print(_unameController.text);
                      print(_pwdController.text);
                      // Navigator.of(context).pushNamed("main");
                    }
                  },
                ),
              ],
            ),
          )
        ],
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Container(
      padding: EdgeInsets.all(20),
      //将表单复制到这个地方
      child: formWidget(),
    ));
  }
}