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();
},
),
],
),
),
],
),
),
),
);
}
}