第1步:找個遙控器(創建控制器)?
// 就像買新遙控器要裝電池
TextEditingController myController = TextEditingController();
??第2步:連上你的玩具(綁定到組件)??
TextField(controller: myController, // 把遙控器綁到輸入框decoration: InputDecoration(labelText: "寫點東西..."),
)
??第3步:用遙控器控制(操作組件)??
// 比如點按鈕時獲取輸入框文字
onPressed: () {String text = myController.text; // 讀取內容print("你寫了:$text");myController.clear(); // 清空輸入框(就像按復位鍵)
}
??第4步:不用時關掉(避免卡頓)??
// 就像玩具玩完要關電源
@override
void dispose() {myController.dispose(); // 關閉控制器super.dispose();
}
完整代碼例子
import 'package:flutter/material.dart';void main() {// 啟動應用,根組件為 MyApprunApp(const MyApp());
}class MyApp extends StatelessWidget {const MyApp({super.key});@overrideWidget build(BuildContext context) {// 創建 Material 風格應用框架return MaterialApp(title: '控制器示例',home: Scaffold(appBar: AppBar(title: const Text('文本控制器演示')),body: const Center(child: TextEditorDemo()), // 主頁面內容),);}
}class TextEditorDemo extends StatefulWidget {const TextEditorDemo({super.key});@overrideState<TextEditorDemo> createState() => _TextEditorDemoState();
}class _TextEditorDemoState extends State<TextEditorDemo> {// 1. 創建控制器實例final TextEditingController _controller = TextEditingController();String _displayText = ""; // 存儲顯示文本@overridevoid initState() {super.initState();// 2. 監聽輸入變化(可選)_controller.addListener(() {print("實時輸入: ${_controller.text}"); // 控制臺打印輸入內容[6](@ref)});}@overridevoid dispose() {// 5. 銷毀控制器(必須!避免內存泄漏)_controller.dispose(); // 釋放控制器資源[1,6](@ref)super.dispose();}void _updateText() {// 3. 使用控制器獲取輸入內容setState(() {_displayText = _controller.text; // 更新顯示文本});}void _clearText() {// 4. 使用控制器清空輸入_controller.clear(); // 清空文本框內容[1](@ref)setState(() => _displayText = "");}@overrideWidget build(BuildContext context) {return Padding(padding: const EdgeInsets.all(20.0),child: Column(mainAxisAlignment: MainAxisAlignment.center,children: [// 文本輸入框綁定控制器TextField(controller: _controller, // 綁定控制器到輸入框[5](@ref)decoration: const InputDecoration(labelText: "輸入內容",border: OutlineInputBorder(),suffixIcon: Icon(Icons.edit),),onSubmitted: (value) => _updateText(), // 鍵盤提交時觸發),const SizedBox(height: 20),// 顯示控制器獲取的文本Text("當前內容: $_displayText",style: const TextStyle(fontSize: 18, color: Colors.blue),),const SizedBox(height: 20),Row(mainAxisAlignment: MainAxisAlignment.spaceEvenly,children: [// 更新文本按鈕ElevatedButton(onPressed: _updateText, // 點擊時更新顯示文本child: const Text("顯示內容"),),// 清空按鈕ElevatedButton(onPressed: _clearText, // 點擊時清空文本[1](@ref)style: ElevatedButton.styleFrom(backgroundColor: Colors.red),child: const Text("清空"),),],),],),);}
}