[flutter-18] Form 表单

Form 表单

• 作用：当我们在注册登录界面时候，需要对每一个输入框进行验证的时候、如果对每一个textField进行校验是一件很繁琐的事情、这时候表单Form就可以完成一次性校验工作。
• 使用：我们把多个输入框放在一个Form表单里统一处理，进行统一校验。
• Form 也是一个Widget
• Form表单里的输入框必须是FormField类型的，而TextFIeld是继承自StatefulWIdget，所以我们需要使用TextFormField 组件，它是继承自FormField，然后都塞进Form表单里。

1. 通过Form展示注册登录界面

class Content extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.all(20),
      child: FormDemoWidget(),
    );
  }
}

class FormDemoWidget extends StatefulWidget {
  @override
  _FormDemoState createState() => _FormDemoState();
}

class _FormDemoState extends State<FormDemoWidget> {
  // 如何同时获取用户名和密码的表单信息？
  // 如果我们调用Form的State对象的save方法，就会调用Form中放入的TextFormField的onSave回调：
  // 在Flutter如何可以获取一个通过一个引用获取一个StatefulWidget的State对象呢？
  final registerFormKey = GlobalKey<FormState>();
  String name, password;

  // 按钮的回调方法
  void _register() {
    // 一定要通过注册拿到currentState, 然后调用save()方法才可以触发
    registerFormKey.currentState.save();
    // 验证器回调函数
    //registerFormKey.currentState.validate();
    print(
        'register------registerFormKey: $registerFormKey, name=$name, password=$password');
  }

  @override
  Widget build(BuildContext context) {
    return Form(
      key: registerFormKey, // registerFormKey.currentState 可以获取它的state对象
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          // 账户
          TextFormField(
            //style: TextStyle(color: Colors.red), // 设置text文本的样式
            decoration: InputDecoration(
              //border: InputBorder.none, // 取消横线
              suffixIcon: Icon(Icons.warning_amber_outlined),
              icon: Icon(Icons.people),
              labelText: '请输入账户',
            ),
            onSaved: (value) {
              this.name = value;
            },
            validator: (value) {
              if (value.isEmpty) {
                return '账户不能为空';
              }
              return null;
            },
            //autovalidate: true,// 弃用
            autovalidateMode: AutovalidateMode.onUserInteraction, // 用户输入以后开始校验
          ),
          TextFormField(
              obscureText: true, // 显示密文
              decoration: InputDecoration(
                suffixIcon: Icon(Icons.lock_open),
                icon: Icon(Icons.lock),
                labelText: '请输入密码',
                helperText: 'At least 8 characters',
              ),
              onSaved: (value) {
                this.password = value;
              }),
          SizedBox(
            height: 50,
          ),
          Container(
            width: double.infinity,
            height: 44,
            child: RaisedButton(
              color: Colors.blueGrey,
              child: Text(
                'Login', // 登录
                style: TextStyle(
                  fontSize: 16,
                  color: Colors.white,
                  fontWeight: FontWeight.bold,
                ),
              ),
              onPressed: () => _register(),
              shape: RoundedRectangleBorder(
                // 设置按钮圆角
                borderRadius: BorderRadius.circular(4),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

2. 保存和获取表单中每一个输入框的数据

• 当我们点击注册或者登录按钮的时候，拿到每个输入框里的数据
• TextFormField 里有onSave() 方法，可以赋值给我们定义的变量中保存起来， 触发机制在下面
• 如果我们调用Form的State对象的save()方法，就会调用Form中放入的TextFormField的onSave回调。

2.1 在Flutter如何可以获取一个通过一个引用获取一个StatefulWidget的State对象呢？

• 定义一个变量绑定GlobalKey， 如final registerFormKey = GlobalKey();
• 在Form Build方法中将这个变量的GlobalKey赋值给key
• 创建一个点击按钮的回调方法，开始执行Form当前State对象的save()方法，即可触发TextFormField中的Save() 回调
• 通过绑定的GlobalKey获取当前State的对象：registerFormKey.currentState

final registerFormKey = GlobalKey<FormState>();
String name, password;

void _register() {
    // 一定要通过注册拿到currentState, 然后调用save()方法才可以触发
    registerFormKey.currentState.save();
    // 验证器回调函数
    //registerFormKey.currentState.validate();
    print(
        'register------registerFormKey: $registerFormKey, name=$name, password=$password');
}

onSaved: (value) {
    this.name = value;
}

key: registerFormKey,

3. 验证器validator

• 3.1 点击按钮开始验证
  • 点击按钮开始执行Form State对象的validator() 方法
  • 在TextFormField方法中监听validator回调，在这里面进行判断校验，返回提示信息，如‘账户不能为空’
• 3.2 输入框的时候验证
  • 在TextFormFIeld中设置autovalidateMode = AutovalidateMode.onUserInteraction(用户输入以后开始校验, 还有always校验，还有naver)
  • 在TextFormField方法中监听validator回调，在这里面进行判断校验，返回提示信息，如‘账户不能为空’

            onSaved: (value) {
              this.name = value;
            },
            validator: (value) {
              if (value.isEmpty) {
                return '账户不能为空1';
              }
              return null;
            },
            //autovalidate: true,// 弃用
            autovalidateMode: AutovalidateMode.onUserInteraction,