Flutter_学习记录_数据更新的学习
Flutter 如果界面上有数据更新时,目前学习到的有3种:
- 第一种: 直接用
StatefulWidget组件,然后当数据更新时,调用setState的方法更新数据,页面上的数据会直接更新; - 第二种: 用
StatefulWidget组件 和InheritedWidget的结合,这种模式比较适用于有比较多层级的场景;这样数据更新时,就不用一层一层的从父类上传递数据; - 第三种:用第三方库
scoped_model, 这种模式下在StatelessWidget也可以实现UI页面上数据的更新。
如要实现下面这个页面的效果(点击 count:x 和底部"+", 实现count的数据加1):

1. StatefulWidget 更新数据的使用
这个比较简单,代码如下:
import 'package:flutter/material.dart';class StatemanagerDemo extends StatefulWidget {const StatemanagerDemo({super.key});State<StatemanagerDemo> createState() => _StatemanagerDemoState();
}class _StatemanagerDemoState extends State<StatemanagerDemo> {int _count = 0;void _increaseCount() {// 这个是关键,只有调用 setState 才能更新页面的数据setState(() {_count += 1;});}Widget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text("StateManagerDemo"),),body: CounterWidget(count: _count, increaseCount: _increaseCount),floatingActionButton: FloatingActionButton(onPressed: _increaseCount,child: Icon(Icons.add),),);}
}class CounterWidget extends StatelessWidget {final int count;final VoidCallback increaseCount;const CounterWidget({super.key, required this.count, required this.increaseCount});Widget build(BuildContext context) {return Center(child: ActionChip(label: Text("$count"),onPressed: increaseCount));}
}
2. StatefulWidget组件 和 InheritedWidget 的结合
代码如下:
//-------用InheritedWidget 实现数据的更新------
class StateManagerInheriteDemo extends StatefulWidget {const StateManagerInheriteDemo({super.key});State<StateManagerInheriteDemo> createState() => _StateManagerInheriteDemoState();
}class _StateManagerInheriteDemoState extends State<StateManagerInheriteDemo> {int _count = 0;void _increaseCount() {setState(() {_count += 1;});}Widget build(BuildContext context) {return CounterProvider(count: _count, increaseCount: _increaseCount, child: Scaffold(appBar: AppBar(title: Text("StateManagerDemo"),),body: CounterWidgetInherite(),floatingActionButton: FloatingActionButton(onPressed: _increaseCount,child: Icon(Icons.add),),));}
}// 创建一个provider类来提供全局可用的数据存储和获取
class CounterProvider extends InheritedWidget {final int count;final VoidCallback increaseCount;final Widget child;const CounterProvider({super.key, required this.count, required this.increaseCount, required this.child}) : super(child: child);// 定义一个of方法,可以获取CounterProvider的数据static CounterProvider? of(BuildContext context) => context.dependOnInheritedWidgetOfExactType<CounterProvider>();bool updateShouldNotify(covariant InheritedWidget oldWidget) {return true;}
}// 模拟多个层级1
class CounterWidgetInherite extends StatelessWidget {const CounterWidgetInherite ({super.key});Widget build(BuildContext context) {return Center(child: Counter(),);}
}// 模拟多个层级2
class Counter extends StatelessWidget {const Counter({super.key});Widget build(BuildContext context) {final int? count = CounterProvider.of(context)?.count;final VoidCallback? increaseCount = CounterProvider.of(context)?.increaseCount;return ActionChip(label: Text("$count"),onPressed: increaseCount,);}
}
3. scoped_model 的使用
scoped_model 是第三方库,需要在项目中引入三方库(引入三方库的方法,参考这个文章);其次,该模式引用到的组件主要是:
ScopedModelScopedModelDescendant
原理还没搞明白,只是看着视频实现了功能,代码如下:
import 'package:flutter/material.dart';
import 'package:scoped_model/scoped_model.dart';//-------用Scoped_Model 实现数据的更新-----
class StateManagerScopteModelDemo extends StatelessWidget {const StateManagerScopteModelDemo({super.key});Widget build(BuildContext context) {// 用ScopedModel 包装一下,提供model属性对应的类型return ScopedModel(model: CounterModel(), child: Scaffold(appBar: AppBar(title: Text("StateManagerDemo"),),body: CounterWidgetScopteModel(),// ScopedModelDescendant 的构建方法获取CounterModel对应的数据floatingActionButton: ScopedModelDescendant<CounterModel>(rebuildOnChange: false,builder: (context, _, model) {return FloatingActionButton(onPressed: model.increaseCount,child: Icon(Icons.add),);}),));}
}class CounterWidgetScopteModel extends StatelessWidget {const CounterWidgetScopteModel ({super.key});Widget build(BuildContext context) {return Center(// ScopedModelDescendant 的构建方法获取CounterModel对应的数据child: ScopedModelDescendant<CounterModel>(builder: (context, _, model) {return ActionChip(label: Text("count: ${model.count}"),onPressed: model.increaseCount,);}),);}
}// 创建继承于Model的业务类,来存放对应的count和用到的方法
class CounterModel extends Model {int _count = 0;int get count => _count;void increaseCount() {_count += 1;// 使用Model小部件的地方会监听Model的变化,可以用notifyListeners方法重建UI notifyListeners();}
}
相关文章:
Flutter_学习记录_数据更新的学习
Flutter 如果界面上有数据更新时,目前学习到的有3种: 第一种: 直接用 StatefulWidget组件,然后当数据更新时,调用setState的方法更新数据,页面上的数据会直接更新;第二种: 用 State…...
c++ 多线程知识汇总
一、std::thread std::thread 是 C11 引入的标准库中的线程类,用于创建和管理线程 1. 带参数的构造函数 template <class F, class... Args> std::thread::thread(F&& f, Args&&... args);F&& f:线程要执行的函数&…...
day09_实时类标签/指标
文章目录 day09_实时类标签/指标一、日志数据实时采集2、Flume简介2.3 项目日志数据采集Flume配置2.3.1 涉及的Flume组件和参数2.3.2 Nginx日志采集2.3.3 用户行为日志采集 二、Nginx日志数据统计1、日志格式说明2、数据ETL2.1 日志抽取2.1.1 正则表达式2.1.2 基于Spark实现Ngi…...
【前端开发学习笔记16】Vue_9
文章分类架子 多个页面复用,封装成组件: props 定制标题默认插槽 default 定制内容主体具名插槽 extra 定制按钮 <template><el-card class"page-container"><template #header><div class"header"><s…...
Bash 中的运算方式
目录 概述: 1. (()) 运算符 2. let 命令 3. expr 命令 4. $[] 直接运算 5. bc(计算器,支持浮点数) 6. awk(强大的文本处理工具,也可计算) 概述: Bash 本身只支持整数运算&am…...
2025年3月营销灵感日历
2025年的第一场营销大战已经拉开帷幕了! 三月可是全年最值钱的营销黄金月——妇女节、植树节、315消费者日三大爆点连击,还有春分、睡眠日、世界诗歌日等20隐藏流量密码。 道叔连夜扒了18个行业数据,整理了这份《2025年3月营销灵感日历》&a…...
MySQL的innoDB引擎
一、逻辑存储结构 表空间:ibd文件,一个MySQL实例可以对应多个表空间,用于存储记录,索引等数据; 段:分为数据段(leaf node segment)、索引段(non-leaf node segment)、回滚段(rollback segment),innodb是索引组织表,数据段就是B+树的非叶子节点。段用来管理多个e…...
HCIA项目实践---OSPF的知识和原理总结
9.5 OSPF 9.5.1 从哪些角度评判一个动态路由协议的好坏? (1)选路佳(是否会出环) OSPF 协议采用链路状态算法,通过收集网络拓扑信息来计算最短路径,从根本上避免了路由环路的产生。 (…...
hexo 魔改 | 修改卡片透明度
hexo 魔改 | 修改卡片透明度 ** 博客食物用更佳 博客地址 ** 这是笔者自己瞎倒腾的。作为前端菜鸡一枚,大佬们随便看看就好~ 我用的主题是 butterfly 4.12.0 分析 通过开发者工具可以看出来卡片的背景和 --card-bg 变量有关 再在 sources 下的 css 文件夹下的…...
今日AI和商界事件(2025-02-13)
今日AI领域的主要事件包括: 一、OpenAI相关动态 取消独立发布o3模型计划: OpenAI首席执行官奥尔特曼宣布,公司取消独立发布o3模型的计划。未来几个月内,OpenAI将推出GPT-5,该模型将整合多项技术,并应用于C…...
38.日常算法
1.最短无序连续子数组 题目来源 给你一个整数数组 nums ,你需要找出一个 连续子数组 ,如果对这个子数组进行升序排序,那么整个数组都会变为升序排序。请你找出符合题意的 最短 子数组,并输出它的长度。 示例 1: 输入…...
如何构建有效的人工智能代理
目录 什么是 AI 代理? 何时应使用 AI 代理? 人工智能代理的构建模块 构建 AI 代理的常用方法 1. 提示链接(分步说明) 2.路由(将任务发送到正确的地方) 3.并行处理(同时做多件事) 4. 协调者和工作者 AI(团队合作) 5. 评估器和优化器(修复错误) 如何让人工…...
qt 事件的传递顺序
在 Qt 中,事件的传递顺序遵循以下基本规则: 事件的产生:当用户与界面交互时,操作(如鼠标点击、键盘输入等)会生成相应的事件(如 QMouseEvent、QKeyEvent 等)。 事件的传递顺序&…...
全面掌握Flutter开发:从核心原理到跨平台实战,构建高效应用
文章目录 引言 一、Flutter框架概述二、Flutter开发环境搭建三、Flutter核心技术解析1. **Widget树与状态管理**2. **路由与导航**3. **网络请求与数据解析**4. **本地存储与数据库**5. **包管理与依赖** 四、实战案例:开发跨平台新闻客户端五、Flutter开发工具与调…...
Flutter 添加 iOS widget 小组件
环境 macOS 15.1 Xcode16.1 Flutter 3.27.4 前言 本篇文章主要记录,在Flutter 项目中如何正确地添加iOS 小组件,iOS 小组件 相关的知识在另一篇文章有记录。 iOS 14 widget 添加小组件 WidgetExtension 打开Xcode New -> Target 选择 iOS -> 搜…...
2025年金三银四经典自动化测试面试题
概述 觉得自动化测试很难? 是的,它确实不简单。但是学会它,工资高啊! 担心面试的时候被问到自动化测试? 嗯,你担心的没错!确实会被经常问到! 现在应聘软件测试工程师的岗位&…...
C++17 中 std::lcm:从入门到精通
文章目录 一、引言二、std::lcm 的基本概念三、入门示例四、计算多个整数的最小公倍数五、std::lcm 的实现原理六、在实际项目中的应用七、注意事项八、总结 一、引言 在 C 编程中,处理数学运算时,计算最小公倍数(Least Common Multiple&…...
初阶c语言(循环语句习题,完结)
前言: c语言为b站鹏哥,嗯对应视频37集 昨天做的c语言,今天在来做一遍,发现做错了 今天改了平均值的计算, 就是说最大值加上最小值,如果说这个数值非常大的话,两个值加上会超过int类型的最大…...
本地Deepseek-r1:7b模型集成到Google网页中对话
本地Deepseek-r1:7b网页对话 基于上一篇本地部署的Deepseek-r1:7b,使用黑窗口对话不方便,现在将本地模型通过插件集成到Google浏览器中 安装Google插件 在Chrome应用商店中搜索page assis 直接添加至Chrome 修改一下语言 RAG设置本地运行的模型&#…...
SSM课设-学生选课系统
【课设者】SSM课设-学生选课系统 分为 管理员 和 老师 和 学生端 技术栈 前端: HtmlCssJavaScriptAjax 后端: Spring、Spring MVC、MyBatis、MySQL、JSP 学生端 --选课 选课 搜索 --查看选课结果 --退选 --查看已修课程 --管理个人信息 老师端 --添加教学课程 添加 …...
进程地址空间(比特课总结)
一、进程地址空间 1. 环境变量 1 )⽤户级环境变量与系统级环境变量 全局属性:环境变量具有全局属性,会被⼦进程继承。例如当bash启动⼦进程时,环 境变量会⾃动传递给⼦进程。 本地变量限制:本地变量只在当前进程(ba…...
React Native 导航系统实战(React Navigation)
导航系统实战(React Navigation) React Navigation 是 React Native 应用中最常用的导航库之一,它提供了多种导航模式,如堆栈导航(Stack Navigator)、标签导航(Tab Navigator)和抽屉…...
日语学习-日语知识点小记-构建基础-JLPT-N4阶段(33):にする
日语学习-日语知识点小记-构建基础-JLPT-N4阶段(33):にする 1、前言(1)情况说明(2)工程师的信仰2、知识点(1) にする1,接续:名词+にする2,接续:疑问词+にする3,(A)は(B)にする。(2)復習:(1)复习句子(2)ために & ように(3)そう(4)にする3、…...
vscode(仍待补充)
写于2025 6.9 主包将加入vscode这个更权威的圈子 vscode的基本使用 侧边栏 vscode还能连接ssh? debug时使用的launch文件 1.task.json {"tasks": [{"type": "cppbuild","label": "C/C: gcc.exe 生成活动文件"…...
理解 MCP 工作流:使用 Ollama 和 LangChain 构建本地 MCP 客户端
🌟 什么是 MCP? 模型控制协议 (MCP) 是一种创新的协议,旨在无缝连接 AI 模型与应用程序。 MCP 是一个开源协议,它标准化了我们的 LLM 应用程序连接所需工具和数据源并与之协作的方式。 可以把它想象成你的 AI 模型 和想要使用它…...
【Web 进阶篇】优雅的接口设计:统一响应、全局异常处理与参数校验
系列回顾: 在上一篇中,我们成功地为应用集成了数据库,并使用 Spring Data JPA 实现了基本的 CRUD API。我们的应用现在能“记忆”数据了!但是,如果你仔细审视那些 API,会发现它们还很“粗糙”:有…...
数据库分批入库
今天在工作中,遇到一个问题,就是分批查询的时候,由于批次过大导致出现了一些问题,一下是问题描述和解决方案: 示例: // 假设已有数据列表 dataList 和 PreparedStatement pstmt int batchSize 1000; // …...
浅谈不同二分算法的查找情况
二分算法原理比较简单,但是实际的算法模板却有很多,这一切都源于二分查找问题中的复杂情况和二分算法的边界处理,以下是博主对一些二分算法查找的情况分析。 需要说明的是,以下二分算法都是基于有序序列为升序有序的情况…...
Spring Cloud Gateway 中自定义验证码接口返回 404 的排查与解决
Spring Cloud Gateway 中自定义验证码接口返回 404 的排查与解决 问题背景 在一个基于 Spring Cloud Gateway WebFlux 构建的微服务项目中,新增了一个本地验证码接口 /code,使用函数式路由(RouterFunction)和 Hutool 的 Circle…...
USB Over IP专用硬件的5个特点
USB over IP技术通过将USB协议数据封装在标准TCP/IP网络数据包中,从根本上改变了USB连接。这允许客户端通过局域网或广域网远程访问和控制物理连接到服务器的USB设备(如专用硬件设备),从而消除了直接物理连接的需要。USB over IP的…...
