Flutter基础(控制器)
第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("清空"),),],),],),);}
}