Flutter TextField 從入門到精通：掌握輸入框的完整指南

1. 引言

2. TextField 的基本用法

3. 主要屬性

4. 自定義 TextField 樣式

4.1 自定義邊框與提示文本

4.2 增加前綴/后綴圖標

4.3 只允許輸入數字

4.4?表單驗證系統

4.5?動態樣式修改?

4.6??防抖搜索（Debounce）

5. 結論

1. 引言

????????在 Flutter 中，TextField 是最常用的文本輸入組件，用于接受用戶輸入，如搜索框、表單、聊天輸入等。它支持多種自定義樣式、輸入格式、事件監聽等功能。本文將介紹 TextField 的基本用法、主要屬性及自定義方法。

2. TextField 的基本用法

? ? TextField 主要通過 controller 獲取輸入值，并支持 onChanged 監聽輸入。

TextField(decoration: InputDecoration(labelText: '請輸入文本',border: OutlineInputBorder(),),onChanged: (value) {print('輸入內容: $value');},
)

3. 主要屬性

屬性	說明
`controller`	監聽輸入框內容并獲取值
`decoration`	自定義輸入框外觀，如邊框、標簽等
`keyboardType`	設置鍵盤類型，如文本、數字等
`obscureText`	是否隱藏輸入內容（密碼）
`maxLines`	設置輸入框的行數
`onChanged`	輸入內容變化時的回調
`onSubmitted`	用戶點擊回車（提交）時觸發

示例：

TextField(keyboardType: TextInputType.number,obscureText: true,maxLines: 1,onSubmitted: (value) => print('提交: $value'),
)

4. 自定義 TextField 樣式

4.1 自定義邊框與提示文本

TextField(decoration: InputDecoration(hintText: '請輸入內容',border: OutlineInputBorder(),),
)

4.2 增加前綴/后綴圖標

TextField(decoration: InputDecoration(prefixIcon: Icon(Icons.search),suffixIcon: Icon(Icons.clear),),
)

4.3 只允許輸入數字

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

4.4?表單驗證系統

final _formKey = GlobalKey<FormState>();TextFormField(validator: (value) {if (value!.isEmpty) return '必填字段';if (!RegExp(r'^1[3-9]\d{9}$').hasMatch(value)) return '手機號格式錯誤';return null;}
)

4.5?動態樣式修改?

InputDecoration(prefixIcon: Icon(error ? Icons.error : Icons.lock),enabledBorder: _buildBorder(Colors.grey),focusedBorder: _buildBorder(Colors.blue),errorBorder: _buildBorder(Colors.red),
)

4.6??防抖搜索（Debounce）

TextField(onChanged: (value) {_debounce.run(() => _searchAPI(value));},
)class Debouncer {final Duration delay;Timer? _timer;void run(VoidCallback action) {_timer?.cancel();_timer = Timer(delay, action);}
}