当前位置: 首页 > 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("清空"),),],),],),);}
}

http://www.lryc.cn/news/576682.html

相关文章:

  • 广外计算机网络期末复习
  • 大模型之提示词工程入门——解锁与AI高效沟通的“钥匙”
  • WOE值:风险建模中的“证据权重”量化术——从似然比理论到FICO评分卡实践
  • python学习打卡day57
  • Python基础(吃洋葱小游戏)
  • 如何让ChatGPT模仿人类写作,降低AIGC率?
  • SpringBoot3.x整合Knife4j接口文档
  • cocos creator 3.8 - 精品源码 - 六边形消消乐(六边形叠叠乐、六边形堆叠战士)
  • 阿里 Qwen3 模型更新,吉卜力风格get
  • (五)神经网络
  • 【数据标注师】线标注
  • Linux软连接和硬连接
  • 复杂驱动开发-TLE9471的休眠流程与定时唤醒
  • 断路器、空气开关、漏电保护器
  • 【扩欧应用】同余方程
  • 概述-4-通用语法及分类
  • 领域驱动设计(DDD)【21】之值对象的优势
  • WebRTC(十二):DTLS
  • PowerBI 柱状图显示MoM销量环比示例,以及解决相同列值时设置柱子颜色的问题
  • 【转】PostgreSql的镜像地址
  • 一个简单测试Deepseek吞吐量的脚本,国内环境可跑
  • QTreeWidget 简单使用
  • web自动化测试常见函数
  • 西门子S7-200 SMART PLC:小型自动化领域的高效之选
  • 华为云鸿蒙应用入门级开发者认证 实验部分题目及操作步骤
  • 基于Uniapp+SpringBoot+Vue 的在线商城小程序
  • AI 在金融领域的落地实践:从智能风控到量化交易的技术突破与案例解析
  • 【Docker基础】Docker容器管理:docker stats及其参数详解
  • 使用asyncio构建高性能网络爬虫
  • 华为云Flexus+DeepSeek征文|基于Dify构建AI资讯语音播报工作流