当前位置: 首页 > news >正文

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("清空"),),],),],),);}
}

相关文章:

  • eTools 开源发布
  • 如何用VS Code、Sublime Text开发51单片机
  • Mysql架构
  • 顺序表的常见算法
  • 【编程实践】利用python在Blender生成三维模型
  • Stable Diffusion入门-ControlNet 深入理解 第四课:风格迁移与重绘控制模型——让AI也有“艺术天赋”!
  • FPGA设计的上板调试
  • 微信小程序实现简版点赞动画
  • 【linux】文件与目录命令 - iconv
  • Kafka 消费者重平衡问题排查与优化实践
  • 下载最新版本的OpenOCD
  • (LeetCode 每日一题) 2099. 找到和最大的长度为 K 的子序列 (排序)
  • 【C++】transform, reduce, scan是什么意思?理解常用并行算法及其实现原理
  • [Andrej Karpathy_2] vibe coding | 大型语言模型的1960年代 | 自主性滑块
  • 【云桌面容器KasmVNC】如何关闭SSL使用HTTP
  • [Linux]从零开始的STM32MP157移植Ubuntu根文件系统教程
  • Linux软连接和硬连接
  • git 挑选:git cherry-pick
  • DeepSeek改写glaredb的示例实现自定义CLI界面程序
  • c# 比较两个list 之间元素差异