import 'package:flutter/material.dart';
main(){
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
appBar: AppBar(
title: const Text("焦点的处理"),
centerTitle: true,
),
body: const MyHomePage(),
),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({Key? key}) : super(key: key);
@override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
final TextEditingController _username = TextEditingController();
final TextEditingController _password = TextEditingController();
final GlobalKey _fromKey = GlobalKey<FormState>();
@override
Widget build(BuildContext context) {
return Padding(
padding: const EdgeInsets.all(16.0),
child: Form(
key: _fromKey,// 设置globalKey,用于后面获取FormState
autovalidateMode: AutovalidateMode.onUserInteraction, //开启自动验证显示
child: Column(
children: [
TextFormField(
controller: _username,
decoration: const InputDecoration(
prefixIcon: Icon(Icons.person),
labelText: "用户名",
hintText: "请输入用户名"
),
validator: (value){
return value!.trim().isNotEmpty ? null:"用户名能为空";
},
),
TextFormField(
controller: _password,
decoration: const InputDecoration(
prefixIcon: Icon(Icons.lock),
labelText: "密码",
hintText: "请输入密码"
),
validator: (value){
return value!.trim().length > 5 ? null:"请输入大于六位数的密码";
},
),
Padding(
padding: const EdgeInsets.only(top: 28.0),
child: Row(
children: [
Expanded(
child: ElevatedButton(
onPressed: (){
// 通过_formKey.currentState 获取FormState后,
// 调用validate()方法校验用户名密码是否合法,校验
// 通过后再提交数据。
if((_fromKey.currentState as FormState).validate()){
debugPrint("提交表单成功");
}
},
child: const Padding(
padding: EdgeInsets.all(16.0),
child: Text("登陆"),
),
),
),
],
),
)
],
),
)
);
}
}
以上的校验还可以不使用GlobalKey来实现,使用Build来构造。Form.of(context)直接得到FormState。
Padding(
padding: const EdgeInsets.only(top: 28.0),
child: Row(
children: [
Expanded(
child: Builder(
builder: (context) {
return ElevatedButton(
onPressed: (){
// 调用validate()方法校验用户名密码是否合法,校验
// 通过后再提交数据。
if(Form.of(context)!.validate()){
debugPrint("提交表单成功");
}
},
child: const Padding(
padding: EdgeInsets.all(16.0),
child: Text("登陆"),
),
);
}
),
),
],
),
)
文章评论