表单与输入验证：TextField 到 Form

表单开发的常见问题

登录、注册、搜索、后台筛选都离不开表单。Flutter 中简单输入可以用 TextField，复杂表单建议用 Form + TextFormField + GlobalKey 管理校验。

基础表单示例

final formKey = GlobalKey<FormState>();
final emailController = TextEditingController();

Form(
  key: formKey,
  child: TextFormField(
    controller: emailController,
    decoration: const InputDecoration(labelText: '邮箱'),
    validator: (value) {
      if (value == null || value.trim().isEmpty) {
        return '请输入邮箱';
      }
      if (!value.contains('@')) {
        return '邮箱格式不正确';
      }
      return null;
    },
  ),
)

提交逻辑

void submit() {
  final isValid = formKey.currentState?.validate() ?? false;
  if (!isValid) return;

  final email = emailController.text.trim();
  // 调用登录或注册接口
}

注意释放资源

TextEditingController、FocusNode 这类对象要在 StatefulWidget 的 dispose 中释放，避免页面销毁后仍占用资源。