Flutter 零基础入门（三十三）：Form 表单 —— 校验、提交与完整登录流程

LarryLan

发布于 2026-02-04 14:10:03

1110

Form 表单 —— 校验、提交与完整登录流程

在上一篇中，我们已经学会了：

TextField 输入框
TextEditingController
获取用户输入内容

但现在有一个现实问题：

❓ 用户什么都没输，也能点“登录”吗？ ❓ 密码太短怎么办？ ❓ 怎么统一校验所有输入框？

📌 这正是 Form 表单 存在的意义。

一、为什么需要 Form？

在真实 App 中，表单必须做到：

输入不能为空
格式合法
一次性校验所有字段
校验通过才能提交

📌 单靠 TextField 是不够的。

二、Form 的核心组成（先记住）

Flutter 表单由 三部分 组成：

1️⃣ Form 2️⃣ FormField（通常是 TextFormField） 3️⃣ GlobalKey

三、最简单的 Form 示例

Form(
  child: Column(
    children: [
      TextFormField(),
      ElevatedButton(
        onPressed: () {},
        child: Text('提交'),
      ),
    ],
  ),
)

⚠️ 现在这个表单 还不能校验。

四、GlobalKey：表单的“遥控器”（关键）

1️⃣ 定义一个 key

final _formKey = GlobalKey<FormState>();

2️⃣ 绑定到 Form

Form(
  key: _formKey,
  child: ...
)

📌 这个 key 用来：

校验表单
保存表单状态

五、TextFormField（表单专用输入框）

1️⃣ 基本写法

TextFormField(
  decoration: InputDecoration(
    hintText: '请输入用户名',
    border: OutlineInputBorder(),
  ),
)

📌 和 TextField 很像，但它支持校验。

六、表单校验（核心功能）

1️⃣ 使用 validator

TextFormField(
  decoration: InputDecoration(
    hintText: '请输入用户名',
    border: OutlineInputBorder(),
  ),
  validator: (value) {
    if (value == null || value.isEmpty) {
      return '用户名不能为空';
    }
    return null;
  },
)

📌 规则：

返回字符串 → 校验失败（显示错误）
返回 null → 校验通过

七、提交时统一校验表单

1️⃣ 校验方法

_formKey.currentState!.validate()

2️⃣ 按钮点击示例

ElevatedButton(
  onPressed: () {
    if (_formKey.currentState!.validate()) {
      print('校验通过，提交表单');
    }
  },
  child: Text('登录'),
)

📌 这就是标准表单提交流程。

八、完整登录页面示例（重点）

class LoginPage extends StatefulWidget {
  @override
  _LoginPageState createState() => _LoginPageState();
}

class _LoginPageState extends State<LoginPage> {
  final _formKey = GlobalKey<FormState>();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('登录')),
      body: Padding(
        padding: EdgeInsets.all(16),
        child: Form(
          key: _formKey,
          child: Column(
            children: [
              TextFormField(
                decoration: InputDecoration(
                  hintText: '用户名',
                  border: OutlineInputBorder(),
                ),
                validator: (value) {
                  if (value == null || value.isEmpty) {
                    return '请输入用户名';
                  }
                  return null;
                },
              ),
              SizedBox(height: 16),
              TextFormField(
                obscureText: true,
                decoration: InputDecoration(
                  hintText: '密码',
                  border: OutlineInputBorder(),
                ),
                validator: (value) {
                  if (value == null || value.length < 6) {
                    return '密码不能少于 6 位';
                  }
                  return null;
                },
              ),
              SizedBox(height: 24),
              ElevatedButton(
                onPressed: () {
                  if (_formKey.currentState!.validate()) {
                    print('登录成功');
                  }
                },
                child: Text('登录'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

📌 到这里，你已经能写出 完整可用的登录页。

九、Form 的常见使用场景

登录 / 注册
修改资料
地址填写
反馈提交
搜索筛选

十、新手最容易犯的错误

❌ 使用 TextField 而不是 TextFormField ❌ 忘记绑定 Form key ❌ validator 永远返回字符串 ❌ 表单不加 padding ❌ 输入框太多导致溢出（需滚动）

十一、本篇你真正掌握了什么？

你已经学会：

Form 的整体结构
TextFormField 的使用
表单校验规则
提交流程的标准写法
登录页面的完整实现

📌 到这里为止：

你已经具备开发“真实业务页面”的能力

十二、一句话总结

TextField 负责输入 Form 负责校验 GlobalKey 负责控制

🔜 下一篇预告

《Flutter 零基础入门（三十四）：页面跳转 Navigator —— 从一个页面到另一个页面》

下一篇我们将正式进入：

页面跳转
push / pop
页面返回结果

🚀 真正开始“多页面 App 开发”

本文参与腾讯云自媒体同步曝光计划，分享自微信公众号。

原始发表：2026-01-26，如有侵权请联系 cloudcommunity@tencent.com 删除

入门

flutter

表单

基础

本文分享自 Larry的Hub 微信公众号，前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

登录后参与评论

0 条评论

热度