flutter 中 Form 和 FormField 实现表单验证

在Flutter中，可以使用Form和FormField来实现表单验证。Form控件用于创建一个表单上下文，而FormField控件用于表示需要验证的表单字段。

以下是一个简单的例子，展示如何使用Form和FormField来实现一个含有用户名和密码的登录表单，并对这些字段进行了简单的验证：

import 'package:flutter/material.dart';
 
void main() => runApp(MyApp());
 
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: LoginPage(),
    );
  }
}
 
class LoginPage extends StatefulWidget {
  @override
  _LoginPageState createState() => _LoginPageState();
}
 
class _LoginPageState extends State<LoginPage> {
  final _formKey = GlobalKey<FormState>();
  String _username, _password;
 
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Form(
          key: _formKey,
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[
              TextFormField(
                validator: (value) {
                  if (value.isEmpty) {
                    return '用户名不能为空';
                  }
                  return null;
                },
                onSaved: (value) => _username = value,
                decoration: InputDecoration(
                  labelText: '用户名',
                ),
              ),
              TextFormField(
                obscureText: true,
                validator: (value) {
                  if (value.isEmpty) {
                    return '密码不能为空';
                  }
                  return null;
                },
                onSaved: (value) => _password = value,
                decoration: InputDecoration(
                  labelText: '密码',
                ),
              ),
              RaisedButton(
                child: Text('登录'),
                onPressed: () {
                  if (_formKey.currentState.validate()) {
                    _formKey.currentState.save();
                    // 在这里添加登录逻辑
                    print('登录 $_username $_password');
                  }
                },
              ),
            ],
          ),
        ),
      ),
    );
  }
}

在这个例子中，Form有一个全局的键（GlobalKey），这使得我们可以从外部（如按钮的onPressed回调中）触发表单的验证。每个TextFormField都有一个validator函数，这个函数在字段值改变时被调用，并且如果字段值不满足验证条件，则返回一个错误信息。onSaved回调在表单保存时被调用，用于保存字段值。