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

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 是第三方库,需要在项目中引入三方库(引入三方库的方法,参考这个文章);其次,该模式引用到的组件主要是:

  • ScopedModel
  • ScopedModelDescendant

原理还没搞明白,只是看着视频实现了功能,代码如下:

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 如果界面上有数据更新时&#xff0c;目前学习到的有3种&#xff1a; 第一种&#xff1a; 直接用 StatefulWidget组件&#xff0c;然后当数据更新时&#xff0c;调用setState的方法更新数据&#xff0c;页面上的数据会直接更新&#xff1b;第二种&#xff1a; 用 State…...

c++ 多线程知识汇总

一、std::thread std::thread 是 C11 引入的标准库中的线程类&#xff0c;用于创建和管理线程 1. 带参数的构造函数 template <class F, class... Args> std::thread::thread(F&& f, Args&&... args);F&& f&#xff1a;线程要执行的函数&…...

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

文章分类架子 多个页面复用&#xff0c;封装成组件&#xff1a; props 定制标题默认插槽 default 定制内容主体具名插槽 extra 定制按钮 <template><el-card class"page-container"><template #header><div class"header"><s…...

Bash 中的运算方式

目录 概述&#xff1a; 1. (()) 运算符 2. let 命令 3. expr 命令 4. $[] 直接运算 5. bc&#xff08;计算器&#xff0c;支持浮点数&#xff09; 6. awk&#xff08;强大的文本处理工具&#xff0c;也可计算&#xff09; 概述&#xff1a; Bash 本身只支持整数运算&am…...

2025年3月营销灵感日历

2025年的第一场营销大战已经拉开帷幕了&#xff01; 三月可是全年最值钱的营销黄金月——妇女节、植树节、315消费者日三大爆点连击&#xff0c;还有春分、睡眠日、世界诗歌日等20隐藏流量密码。 道叔连夜扒了18个行业数据&#xff0c;整理了这份《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 从哪些角度评判一个动态路由协议的好坏&#xff1f; &#xff08;1&#xff09;选路佳&#xff08;是否会出环&#xff09; OSPF 协议采用链路状态算法&#xff0c;通过收集网络拓扑信息来计算最短路径&#xff0c;从根本上避免了路由环路的产生。 &#xff08…...

hexo 魔改 | 修改卡片透明度

hexo 魔改 | 修改卡片透明度 ** 博客食物用更佳 博客地址 ** 这是笔者自己瞎倒腾的。作为前端菜鸡一枚&#xff0c;大佬们随便看看就好~ 我用的主题是 butterfly 4.12.0 分析 通过开发者工具可以看出来卡片的背景和 --card-bg 变量有关 再在 sources 下的 css 文件夹下的…...

今日AI和商界事件(2025-02-13)

今日AI领域的主要事件包括&#xff1a; 一、OpenAI相关动态 取消独立发布o3模型计划&#xff1a; OpenAI首席执行官奥尔特曼宣布&#xff0c;公司取消独立发布o3模型的计划。未来几个月内&#xff0c;OpenAI将推出GPT-5&#xff0c;该模型将整合多项技术&#xff0c;并应用于C…...

38.日常算法

1.最短无序连续子数组 题目来源 给你一个整数数组 nums &#xff0c;你需要找出一个 连续子数组 &#xff0c;如果对这个子数组进行升序排序&#xff0c;那么整个数组都会变为升序排序。请你找出符合题意的 最短 子数组&#xff0c;并输出它的长度。 示例 1&#xff1a; 输入…...

如何构建有效的人工智能代理

目录 什么是 AI 代理? 何时应使用 AI 代理? 人工智能代理的构建模块 构建 AI 代理的常用方法 1. 提示链接(分步说明) 2.路由(将任务发送到正确的地方) 3.并行处理(同时做多件事) 4. 协调者和工作者 AI(团队合作) 5. 评估器和优化器(修复错误) 如何让人工…...

qt 事件的传递顺序

在 Qt 中&#xff0c;事件的传递顺序遵循以下基本规则&#xff1a; 事件的产生&#xff1a;当用户与界面交互时&#xff0c;操作&#xff08;如鼠标点击、键盘输入等&#xff09;会生成相应的事件&#xff08;如 QMouseEvent、QKeyEvent 等&#xff09;。 事件的传递顺序&…...

全面掌握Flutter开发:从核心原理到跨平台实战,构建高效应用

文章目录 引言 一、Flutter框架概述二、Flutter开发环境搭建三、Flutter核心技术解析1. **Widget树与状态管理**2. **路由与导航**3. **网络请求与数据解析**4. **本地存储与数据库**5. **包管理与依赖** 四、实战案例&#xff1a;开发跨平台新闻客户端五、Flutter开发工具与调…...

Flutter 添加 iOS widget 小组件

环境 macOS 15.1 Xcode16.1 Flutter 3.27.4 前言 本篇文章主要记录&#xff0c;在Flutter 项目中如何正确地添加iOS 小组件&#xff0c;iOS 小组件 相关的知识在另一篇文章有记录。 iOS 14 widget 添加小组件 WidgetExtension 打开Xcode New -> Target 选择 iOS -> 搜…...

2025年金三银四经典自动化测试面试题

概述 觉得自动化测试很难&#xff1f; 是的&#xff0c;它确实不简单。但是学会它&#xff0c;工资高啊&#xff01; 担心面试的时候被问到自动化测试&#xff1f; 嗯&#xff0c;你担心的没错&#xff01;确实会被经常问到&#xff01; 现在应聘软件测试工程师的岗位&…...

C++17 中 std::lcm:从入门到精通

文章目录 一、引言二、std::lcm 的基本概念三、入门示例四、计算多个整数的最小公倍数五、std::lcm 的实现原理六、在实际项目中的应用七、注意事项八、总结 一、引言 在 C 编程中&#xff0c;处理数学运算时&#xff0c;计算最小公倍数&#xff08;Least Common Multiple&…...

初阶c语言(循环语句习题,完结)

前言&#xff1a; c语言为b站鹏哥&#xff0c;嗯对应视频37集 昨天做的c语言&#xff0c;今天在来做一遍&#xff0c;发现做错了 今天改了平均值的计算&#xff0c; 就是说最大值加上最小值&#xff0c;如果说这个数值非常大的话&#xff0c;两个值加上会超过int类型的最大…...

本地Deepseek-r1:7b模型集成到Google网页中对话

本地Deepseek-r1:7b网页对话 基于上一篇本地部署的Deepseek-r1:7b&#xff0c;使用黑窗口对话不方便&#xff0c;现在将本地模型通过插件集成到Google浏览器中 安装Google插件 在Chrome应用商店中搜索page assis 直接添加至Chrome 修改一下语言 RAG设置本地运行的模型&#…...

SSM课设-学生选课系统

【课设者】SSM课设-学生选课系统 分为 管理员 和 老师 和 学生端 技术栈 前端: HtmlCssJavaScriptAjax 后端: Spring、Spring MVC、MyBatis、MySQL、JSP 学生端 --选课 选课 搜索 --查看选课结果 --退选 --查看已修课程 --管理个人信息 老师端 --添加教学课程 添加 …...

React 第五十五节 Router 中 useAsyncError的使用详解

前言 useAsyncError 是 React Router v6.4 引入的一个钩子&#xff0c;用于处理异步操作&#xff08;如数据加载&#xff09;中的错误。下面我将详细解释其用途并提供代码示例。 一、useAsyncError 用途 处理异步错误&#xff1a;捕获在 loader 或 action 中发生的异步错误替…...

Flask RESTful 示例

目录 1. 环境准备2. 安装依赖3. 修改main.py4. 运行应用5. API使用示例获取所有任务获取单个任务创建新任务更新任务删除任务 中文乱码问题&#xff1a; 下面创建一个简单的Flask RESTful API示例。首先&#xff0c;我们需要创建环境&#xff0c;安装必要的依赖&#xff0c;然后…...

椭圆曲线密码学(ECC)

一、ECC算法概述 椭圆曲线密码学&#xff08;Elliptic Curve Cryptography&#xff09;是基于椭圆曲线数学理论的公钥密码系统&#xff0c;由Neal Koblitz和Victor Miller在1985年独立提出。相比RSA&#xff0c;ECC在相同安全强度下密钥更短&#xff08;256位ECC ≈ 3072位RSA…...

《通信之道——从微积分到 5G》读书总结

第1章 绪 论 1.1 这是一本什么样的书 通信技术&#xff0c;说到底就是数学。 那些最基础、最本质的部分。 1.2 什么是通信 通信 发送方 接收方 承载信息的信号 解调出其中承载的信息 信息在发送方那里被加工成信号&#xff08;调制&#xff09; 把信息从信号中抽取出来&am…...

04-初识css

一、css样式引入 1.1.内部样式 <div style"width: 100px;"></div>1.2.外部样式 1.2.1.外部样式1 <style>.aa {width: 100px;} </style> <div class"aa"></div>1.2.2.外部样式2 <!-- rel内表面引入的是style样…...

Rapidio门铃消息FIFO溢出机制

关于RapidIO门铃消息FIFO的溢出机制及其与中断抖动的关系&#xff0c;以下是深入解析&#xff1a; 门铃FIFO溢出的本质 在RapidIO系统中&#xff0c;门铃消息FIFO是硬件控制器内部的缓冲区&#xff0c;用于临时存储接收到的门铃消息&#xff08;Doorbell Message&#xff09;。…...

Python基于历史模拟方法实现投资组合风险管理的VaR与ES模型项目实战

说明&#xff1a;这是一个机器学习实战项目&#xff08;附带数据代码文档&#xff09;&#xff0c;如需数据代码文档可以直接到文章最后关注获取。 1.项目背景 在金融市场日益复杂和波动加剧的背景下&#xff0c;风险管理成为金融机构和个人投资者关注的核心议题之一。VaR&…...

音视频——I2S 协议详解

I2S 协议详解 I2S (Inter-IC Sound) 协议是一种串行总线协议&#xff0c;专门用于在数字音频设备之间传输数字音频数据。它由飞利浦&#xff08;Philips&#xff09;公司开发&#xff0c;以其简单、高效和广泛的兼容性而闻名。 1. 信号线 I2S 协议通常使用三根或四根信号线&a…...

go 里面的指针

指针 在 Go 中&#xff0c;指针&#xff08;pointer&#xff09;是一个变量的内存地址&#xff0c;就像 C 语言那样&#xff1a; a : 10 p : &a // p 是一个指向 a 的指针 fmt.Println(*p) // 输出 10&#xff0c;通过指针解引用• &a 表示获取变量 a 的地址 p 表示…...

加密通信 + 行为分析:运营商行业安全防御体系重构

在数字经济蓬勃发展的时代&#xff0c;运营商作为信息通信网络的核心枢纽&#xff0c;承载着海量用户数据与关键业务传输&#xff0c;其安全防御体系的可靠性直接关乎国家安全、社会稳定与企业发展。随着网络攻击手段的不断升级&#xff0c;传统安全防护体系逐渐暴露出局限性&a…...