flutter Form 表单组件的初步解析

在一个正常的应用程序中, 表单是用户交互的很重要的一部分

flutter 中你可以自己"绑定"用户的输入数据和 state 中的字段

当然, 还有另一个选择, Flutter 内置了 Form 组件给我们使用, 这个组件是 flutter 框架提供出来帮助我们操作表单的一个组件, 应该是官方较为推荐的方案

不过 Form 的相关中文文章不太多, 基本都是介绍一下 TextFormField 的使用, 更多的 api 云里雾里的, 可能有些朋友不太好理解
我粗略的解析下源码和自定义, 帮助看过的朋友理解下 Form 体系

Form 体系的简单使用

自动校验

官方提供给了我们一些组件来结合 Form 使用, 最常见的就是 TextFormField

import 'package:flutter/material.dart';

class SimpleUseComponent extends StatefulWidget {
  @override
  _SimpleUseComponentState createState() => _SimpleUseComponentState();
}

class _SimpleUseComponentState extends State<SimpleUseComponent> {
  @override
  Widget build(BuildContext context) {
    return Form(
      onChanged: () {
        print("form change");
      },
      child: Column(
        children: <Widget>[
          TextFormField(
            initialValue: "你好",
            validator: (value) {
              if (value.isEmpty) return "不能为空";
              return null;
            },
            autovalidate: true,
          ),
        ],
      ),
    );
  }
}

当我输入/删除时, 会出现日志: ‘form change’

有一个autovalidate的属性, 这个属性可以在TextFormField设置,也可以在Form设置, 自动提交验证的意思, 默认是 false.
当我将所有字符都删除时, 会出现’不能为空’的提示. 这个是由 validator 实现的, 因为我设置了autovalidate为 true, 然后这个返回值如果是 null, 则说明验证通过, 不通过则返回不通过的字符串.

点击后校验

当然,有些表单不要求自动校验, 可能是点击某个按钮后来校验, 这种情况下, 就需要使用 Form.of 来获取到表单状态

话不多说, 代码在下面: