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> 進行表單狀態管理。

final _formKey = GlobalKey<FormState>();Form(key: _formKey,child: Column(children: [TextFormField(decoration: InputDecoration(labelText: '用戶名'),validator: (value) {if (value == null || value.isEmpty) {return '請輸入用戶名';}return null;},),ElevatedButton(onPressed: () {if (_formKey.currentState!.validate()) {print('表單驗證通過');}},child: Text('提交'),),],),
)

3. 主要屬性

屬性	說明
`controller`	獲取和控制輸入框的內容
`decoration`	自定義輸入框外觀，如邊框、標簽等
`keyboardType`	設置鍵盤類型（文本、數字、郵箱等）
`obscureText`	是否隱藏輸入內容（密碼輸入）
`validator`	用于驗證輸入內容是否合法
`onSaved`	表單提交時保存輸入值

示例：

TextFormField(decoration: InputDecoration(hintText: '請輸入密碼'),obscureText: true,validator: (value) {if (value == null || value.length < 6) {return '密碼長度至少為6位';}return null;},
)

4. 自定義 TextFormField 樣式

4.1 設置邊框樣式

TextFormField(decoration: InputDecoration(border: OutlineInputBorder(),labelText: '郵箱',),
)

4.2 設置輸入格式限制

TextFormField(keyboardType: TextInputType.number,inputFormatters: [FilteringTextInputFormatter.digitsOnly],
)

4.3 多行輸入

TextFormField(maxLines: 5,decoration: InputDecoration(labelText: '留言'),
)

5. 結論

? ? TextFormField 是 Flutter 中用于表單輸入的增強版 TextField，支持輸入驗證、狀態管理等功能，適用于用戶注冊、登錄等場景。結合 Form 組件，可實現完整的表單交互，提高應用的可用性。一個完整的注冊頁面代碼如下：

import 'package:flutter/material.dart';class ScRegisterPage extends StatefulWidget {@override_ScRegisterPageState createState() => _ScRegisterPageState();
}class _ScRegisterPageState extends State<ScRegisterPage> {final _formKey = GlobalKey<FormState>();final _scaffoldKey = GlobalKey<ScaffoldState>();FocusNode _userNameNode = new FocusNode();FocusNode _pwdNode = new FocusNode();FocusNode _pwd2Node = new FocusNode();late String _username,_pwd,_pwd2;@overrideWidget build(BuildContext context) {return Scaffold(key: _scaffoldKey,appBar: AppBar(title: Text("注冊"),),//Formbody: Form(key: _formKey,child: ListView(// 輸入框會彈出軟鍵盤，所以加個滑動的Viewpadding: EdgeInsets.fromLTRB(22.0, 18.0, 22.0, 0.0),children: <Widget>[_buildUserName(),_buildPwd(),_buildPwd2(),_buildRegister(),],)),);}Widget _buildUserName() {return TextFormField(focusNode: _userNameNode,//以用戶名輸入框 為默認焦點，則進入頁面會自動彈出軟鍵盤autofocus: true,decoration: InputDecoration(labelText: "用戶名",),//  如鍵盤動作類型textInputAction: TextInputAction.next,onEditingComplete: () {//按下action 的響應FocusScope.of(context).requestFocus(_pwdNode);},//校驗validator: (value) {if (value!.trim().isEmpty) {//錯誤提示return "請輸入用戶名";}_username = value;},);}Widget _buildPwd() {return TextFormField(focusNode: _pwdNode,//以用戶名輸入框 為默認焦點，則進入頁面會自動彈出軟鍵盤autofocus: true,decoration: InputDecoration(labelText: "密碼",),//  如鍵盤動作類型textInputAction: TextInputAction.next,onEditingComplete: () {//按下action 的響應FocusScope.of(context).requestFocus(_pwd2Node);},//校驗validator: (value) {if (value!.trim().isEmpty) {//錯誤提示return "請輸入密碼";}_pwd = value;},);}Widget _buildPwd2() {return TextFormField(focusNode: _pwd2Node,//以用戶名輸入框 為默認焦點，則進入頁面會自動彈出軟鍵盤autofocus: true,decoration: InputDecoration(labelText: "確認密碼",),//  如鍵盤動作類型textInputAction: TextInputAction.go,onEditingComplete: () {//按下action 的響應_click();},//校驗validator: (value) {if (value!.trim().isEmpty) {//錯誤提示return "請確認密碼";}if(_pwd != value){return "兩次密碼輸入不一致";}_pwd2 = value;},);}Widget _buildRegister() {///Container:裝飾性容器return Container(height: 52.0,margin: EdgeInsets.only(top: 18.0),child: ElevatedButton(style: ElevatedButton.styleFrom(foregroundColor: Colors.white, // 文字顏色backgroundColor:Theme.of(context).primaryColor, // 背景色),onPressed: _click,child: Text("注冊",style: TextStyle(color: Colors.white, fontSize: 18.0),),),);}_click() async{//點擊注冊按鈕 讓軟鍵盤隱藏_userNameNode.unfocus();_pwdNode.unfocus();_pwd2Node.unfocus();//校驗輸入內容if (_formKey.currentState!.validate()) {//彈出一個加載框// barrierDismissible： 不允許按返回dismissshowDialog(context: context,barrierDismissible: false,builder: (_){return Center(child: CircularProgressIndicator(),);});//可以調用后端接口去注冊了// var result =  await SccApi.register(_username,_pwd);// //對話框dismiss// Navigator.pop(context);// if(result['errorCode'] == -1){//   var error = result['errorMsg'];//   //彈出提示//   // Toast.show(error, context,gravity: Toast.CENTER);// }else{//   //Toast.show("注冊成功!", context,gravity: Toast.CENTER);//   Navigator.pop(context);// }}}
}