Flutter Form表单组件

Flutter Form表单组件

概述

• Form表单组件：用于对输入框进行分组统一操作，如输入框内容验证、输入框重置、数据保存等操作。
• FormField组件：是一个表单组件，Form组件的子元素必须时FormField组件，该组件包含表单的状态，方便更新UI，通常不会直接使用FormField，而是使用它的子类TextFormField。
• TextFormField组件：继承自FormField，是一个输入框表单。

基本属性

Form

autovalidateMode：表单验证模式。
		- disabled：不会自动验证。
		- always：一直自动验证。
		- onUserInteraction：用户交互操作后开始自动验证。
 
 onChanged：Form组件中的子组件FormField内容发生变化时调用。

FormState

FormState是Form的State类。

validate：验证表单的合法性。会调用每一个FormField的validator方法。

save：会调用每一个FormField的save方法。

reset：会清空FormField的内容。

使用

import 'package:flutter/material.dart';

class FormPage extends StatefulWidget {
  const FormPage({Key? key}) : super(key: key);

  @override
  State<StatefulWidget> createState() {
    return _FormPageState();
  }
}

class _FormPageState extends State<FormPage> {
  final TextEditingController _usernameController = TextEditingController();
  final TextEditingController _passwordController = TextEditingController();
  final GlobalKey _formKey = GlobalKey<FormState>();

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Form组件"),
      ),
      body: Form(
        key: _formKey,
        autovalidateMode: AutovalidateMode.onUserInteraction,
        onChanged: () {
          print("监听子组件FormField发生变化了");
        },
        child: Padding(
          padding: const EdgeInsets.all(10),
          child: Column(
            children: [
              TextFormField(
                autofocus: true,
                controller: _usernameController,
                decoration: const InputDecoration(
                  labelText: "用户名：",
                  hintText: "请输入用户名",
                  icon: Icon(Icons.person),
                ),
                validator: (value) {
                  if (value == null || value.trim().isEmpty) {
                    return "用户名不能为空";
                  }
                  return null;
                },
                onSaved: (value) {
                  print("保存用户名：$value");
                },
                textInputAction: TextInputAction.send,
              ),
              TextFormField(
                controller: _passwordController,
                decoration: const InputDecoration(
                  labelText: "密码：",
                  hintText: "请输入密码",
                  icon: Icon(Icons.lock),
                ),
                keyboardType: TextInputType.number,
                obscureText: true,
                validator: (value) {
                  if (value == null || value.trim().isEmpty) {
                    return "密码不能为空";
                  } else if (value.trim().length < 6) {
                    return "密码不能少于6位";
                  } else {
                    return null;
                  }
                },
                onSaved: (value) {
                  print("保存密码：$value");
                },
              ),
              Padding(
                padding: const EdgeInsets.all(5),
                child: Column(
                  children: [
                    ElevatedButton(
                      child: const Text("登陆"),
                      onPressed: () {
                        if ((_formKey.currentState as FormState).validate()) {
                          print("验证成功");
                          String username = _usernameController.value.text;
                          String password = _passwordController.value.text;
                          if (username == "hello" && password == "123456") {
                            print("登陆成功");
                          } else {
                            print("登陆失败");
                          }
                        } else {
                          print("验证失败");
                        }
                      },
                    ),
                    ElevatedButton(
                      child: const Text("保存"),
                      onPressed: () {
                        var _state = _formKey.currentState as FormState;
                        print(_state);
                        if (_state.validate()) {
                          _state.save();
                        }
                      },
                    ),
                    ElevatedButton(
                      child: const Text("重置信息"),
                      onPressed: () {
                        (_formKey.currentState as FormState).reset();
                      },
                    ),
                  ],
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}