Flutter 零基础入门（四十五）：表单与输入控件 —— TextField、表单校验与提交实战

LarryLan

发布于 2026-03-30 18:04:15

980

表单与输入控件 —— TextField、表单校验与提交实战

到目前为止，你已经掌握了：

多页面 App 架构与导航（TabBar / BottomNavigationBar / 命名路由）
列表刷新与分页
动画基础（隐式动画 / 显式动画 / 页面过渡）
App 美化（主题、颜色、字体）
图标与图片资源管理

但是大多数 App 都需要收集用户输入：登录表单、评论、搜索等。本篇我们将学习 TextField、表单校验与提交。

一、TextField 基础

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

📌 说明：

decoration → 输入框样式
labelText → 标签
hintText → 提示文字
border → 边框样式

1️⃣ 常用属性

属性	功能
controller	获取 / 设置输入内容
keyboardType	键盘类型（TextInputType.emailAddress / number）
obscureText	密码模式（隐藏输入）
maxLength	最大输入长度
onChanged	内容变化回调
onSubmitted	提交回调（按回车 / 完成）

二、使用 TextEditingController

final TextEditingController _usernameController = TextEditingController();

TextField(
  controller: _usernameController,
  decoration: InputDecoration(labelText: '用户名'),
),

获取输入内容：_usernameController.text
清空输入内容：_usernameController.clear()
记得在 StatefulWidget 的 dispose 中释放：

@override
void dispose() {
  _usernameController.dispose();
  super.dispose();
}

三、Form 与表单校验

1️⃣ Form + TextFormField

final _formKey = GlobalKey<FormState>();

Form(
  key: _formKey,
  child: Column(
    children: [
      TextFormField(
        decoration: InputDecoration(labelText: '用户名'),
        validator: (value) {
          if (value == null || value.isEmpty) {
            return '用户名不能为空';
          }
          return null;
        },
      ),
      TextFormField(
        decoration: InputDecoration(labelText: '密码'),
        obscureText: true,
        validator: (value) {
          if (value == null || value.length < 6) {
            return '密码至少6位';
          }
          return null;
        },
      ),
      SizedBox(height: 20),
      ElevatedButton(
        onPressed: () {
          if (_formKey.currentState!.validate()) {
            // 校验通过
            ScaffoldMessenger.of(context).showSnackBar(
              SnackBar(content: Text('提交成功')),
            );
          }
        },
        child: Text('提交'),
      ),
    ],
  ),
)

📌 功能解析：

GlobalKey<FormState> → 控制 Form
validator → 校验函数，返回字符串表示错误信息
validate() → 校验整个表单，全部通过返回 true

2️⃣ 表单校验技巧

必填字段 → value == null || value.isEmpty
最小长度 → value.length < x
正则校验 → 邮箱 / 手机号：

validator: (value) {
  if (!RegExp(r'^\w+@\w+\.\w+$').hasMatch(value!)) {
    return '请输入正确邮箱';
  }
  return null;
}

四、提交表单与获取输入内容

if (_formKey.currentState!.validate()) {
  final username = _usernameController.text;
  final password = _passwordController.text;

  print('用户名: $username, 密码: $password');
  // 发送网络请求或本地处理
}

📌 提交逻辑：