Flutter TextFormField 完全手册与筹划最佳实践

目次
1. 弁言
2. TextFormField 的根本用法
3. 紧张属性
4. 自界说 TextFormField 样式
4.1 设置边框样式
4.2 设置输入格式限定
4.3 多行输入
5. 结论
干系保举

---

1. 弁言

        在 Flutter 中，TextFormField 是 TextField 的扩展版本，专为表单输入筹划。它除了继续 TextField 的全部功能外，还提供了输入验证、表单状态管理等功能，使其成为表单输入的最佳选择。本文将先容 TextFormField 的根本用法、紧张属性及自界说样式。
2. TextFormField 的根本用法

    TextFormField 必要与 Form 组件一起利用，并通过 GlobalKey<FormState> 举行表单状态管理。

1. final _formKey = GlobalKey<FormState>();
3. Form(
4.   key: _formKey,
5.   child: Column(
6.     children: [
7.       TextFormField(
8.         decoration: InputDecoration(labelText: '用户名'),
9.         validator: (value) {
10.           if (value == null || value.isEmpty) {
11.             return '请输入用户名';
12.           }
13.           return null;
14.         },
15.       ),
16.       ElevatedButton(
17.         onPressed: () {
18.           if (_formKey.currentState!.validate()) {
19.             print('表单验证通过');
20.           }
21.         },
22.         child: Text('提交'),
23.       ),
24.     ],
25.   ),
26. )

复制代码

3. 紧张属性

属性分析controller获取和控制输入框的内容decoration自界说输入框表面，如边框、标签等keyboardType设置键盘范例（文本、数字、邮箱等）obscureText是否隐蔽输入内容（暗码输入）validator用于验证输入内容是否正当onSaved表单提交时生存输入值 示例：

1. TextFormField(
2.   decoration: InputDecoration(hintText: '请输入密码'),
3.   obscureText: true,
4.   validator: (value) {
5.     if (value == null || value.length < 6) {
6.       return '密码长度至少为6位';
7.     }
8.     return null;
9.   },
10. )

复制代码

4. 自界说 TextFormField 样式

4.1 设置边框样式

1. TextFormField(
2.   decoration: InputDecoration(
3.     border: OutlineInputBorder(),
4.     labelText: '邮箱',
5.   ),
6. )

复制代码

4.2 设置输入格式限定

1. TextFormField(
2.   keyboardType: TextInputType.number,
3.   inputFormatters: [FilteringTextInputFormatter.digitsOnly],
4. )

复制代码

4.3 多行输入

1. TextFormField(
2.   maxLines: 5,
3.   decoration: InputDecoration(labelText: '留言'),
4. )

复制代码

5. 结论

    TextFormField 是 Flutter 中用于表单输入的加强版 TextField，支持输入验证、状态管理等功能，实用于用户注册、登录等场景。联合 Form 组件，可实现完备的表单交互，进步应用的可用性。一个完备的注册页面代码如下：

1. import 'package:flutter/material.dart';
3. class ScRegisterPage extends StatefulWidget {
4.   @override
5.   _ScRegisterPageState createState() => _ScRegisterPageState();
6. }
8. class _ScRegisterPageState extends State<ScRegisterPage> {
9.   final _formKey = GlobalKey<FormState>();
10.   final _scaffoldKey = GlobalKey<ScaffoldState>();
12.   FocusNode _userNameNode = new FocusNode();
13.   FocusNode _pwdNode = new FocusNode();
14.   FocusNode _pwd2Node = new FocusNode();
16.   late String _username,_pwd,_pwd2;
18.   @override
19.   Widget build(BuildContext context) {
20.     return Scaffold(
21.       key: _scaffoldKey,
22.       appBar: AppBar(
23.         title: Text("注册"),
24.       ),
25.       //Form
26.       body: Form(
27.           key: _formKey,
28.           child: ListView(
29.             // 输入框会弹出软键盘，所以加个滑动的View
30.             padding: EdgeInsets.fromLTRB(22.0, 18.0, 22.0, 0.0),
31.             children: <Widget>[
32.               _buildUserName(),
33.               _buildPwd(),
34.               _buildPwd2(),
35.               _buildRegister(),
36.             ],
37.           )),
38.     );
39.   }
41.   Widget _buildUserName() {
42.     return TextFormField(
43.       focusNode: _userNameNode,
44.       //以用户名输入框 为默认焦点，则进入页面会自动弹出软键盘
45.       autofocus: true,
46.       decoration: InputDecoration(
47.         labelText: "用户名",
48.       ),
49.       //  如键盘动作类型
50.       textInputAction: TextInputAction.next,
51.       onEditingComplete: () {
52.         //按下action 的响应
53.         FocusScope.of(context).requestFocus(_pwdNode);
54.       },
55.       //校验
56.       validator: (value) {
57.         if (value!.trim().isEmpty) {
58.           //错误提示
59.           return "请输入用户名";
60.         }
61.         _username = value;
62.       },
63.     );
64.   }
66.   Widget _buildPwd() {
67.     return TextFormField(
68.       focusNode: _pwdNode,
69.       //以用户名输入框 为默认焦点，则进入页面会自动弹出软键盘
70.       autofocus: true,
71.       decoration: InputDecoration(
72.         labelText: "密码",
73.       ),
74.       //  如键盘动作类型
75.       textInputAction: TextInputAction.next,
76.       onEditingComplete: () {
77.         //按下action 的响应
78.         FocusScope.of(context).requestFocus(_pwd2Node);
79.       },
80.       //校验
81.       validator: (value) {
82.         if (value!.trim().isEmpty) {
83.           //错误提示
84.           return "请输入密码";
85.         }
86.         _pwd = value;
87.       },
88.     );
89.   }
91.   Widget _buildPwd2() {
92.     return TextFormField(
93.       focusNode: _pwd2Node,
94.       //以用户名输入框 为默认焦点，则进入页面会自动弹出软键盘
95.       autofocus: true,
96.       decoration: InputDecoration(
97.         labelText: "确认密码",
98.       ),
99.       //  如键盘动作类型
100.       textInputAction: TextInputAction.go,
101.       onEditingComplete: () {
102.         //按下action 的响应
103.         _click();
104.       },
105.       //校验
106.       validator: (value) {
107.         if (value!.trim().isEmpty) {
108.           //错误提示
109.           return "请确认密码";
110.         }
112.         if(_pwd != value){
113.           return "两次密码输入不一致";
114.         }
115.         _pwd2 = value;
116.       },
117.     );
118.   }
120.   Widget _buildRegister() {
121.     ///Container:装饰性容器
122.     return Container(
123.       height: 52.0,
124.       margin: EdgeInsets.only(top: 18.0),
125.       child: ElevatedButton(
126.         style: ElevatedButton.styleFrom(
127.           foregroundColor: Colors.white, // 文字颜色
128.           backgroundColor:Theme.of(context).primaryColor, // 背景色
129.         ),
130.         onPressed: _click,
131.         child: Text(
132.           "注册",
133.           style: TextStyle(color: Colors.white, fontSize: 18.0),
134.         ),
135.       ),
136.     );
137.   }
139.   _click() async{
140.     //点击注册按钮 让软键盘隐藏
141.     _userNameNode.unfocus();
142.     _pwdNode.unfocus();
143.     _pwd2Node.unfocus();
145.     //校验输入内容
146.     if (_formKey.currentState!.validate()) {
147.       //弹出一个加载框
148.       // barrierDismissible： 不允许按返回dismiss
149.       showDialog(context: context,barrierDismissible: false,builder: (_){
150.         return Center(child: CircularProgressIndicator(),);
151.       });
153.       //可以调用后端接口去注册了
154.       // var result =  await SccApi.register(_username,_pwd);
155.       // //对话框dismiss
156.       // Navigator.pop(context);
157.       // if(result['errorCode'] == -1){
158.       //   var error = result['errorMsg'];
159.       //   //弹出提示
160.       //   // Toast.show(error, context,gravity: Toast.CENTER);
161.       // }else{
162.       //   //Toast.show("注册成功!", context,gravity: Toast.CENTER);
163.       //   Navigator.pop(context);
164.       // }
166.     }
167.   }
168. }

复制代码

干系保举

Flutter 按钮组件 ElevatedButton 详解-CSDN博客文章欣赏阅读1.1k次，点赞25次，收藏29次。本文具体形貌 ElevatedButton 是 Flutter 中常见的按钮组件，实用于夸大操纵。通过 style 属性可以机动地修改配景致、外形、巨细等。把握 ElevatedButton 的利用可以资助开发者创建更雅观的交互界面。_flutter button 组件

Flutter TextField 从入门到夺目：把握输入框的完备指南-CSDN博客文章欣赏阅读652次，点赞35次，收藏25次。本文全面剖析 Flutter TextField 控件的利用本领，覆盖从底子到进阶的完备知识体系。入门部门讲授底子属性（controller、decoration）、键盘范例设置和文本监听；进阶部门深入探究表单验证（Form+TextFormField）、自界说输入格式（正则表达式验证）、动态样式修改（圆角/图标/动画）以及高级功能（输入长度限定、防抖处置惩罚）。通过代码示例演示手机号输入验证、暗码隐蔽切换、输入掩码等实战场景，并提供多平台适配、性能优化和无停滞访问等最佳实践方案。