<code>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("登陆"), ), ), ), ], ), ) ], ), ) ); } }</code>
以上的校验还可以不使用GlobalKey来实现,使用Build来构造。Form.of(context)直接得到FormState。
<code> 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("登陆"), ), ); } ), ), ], ), )</code>
文章评论