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

Flutter_学习记录_数据更新的学习

news 来源：原创 2025/5/11 13:13:55

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});@overrideState<StatemanagerDemo> createState() => _StatemanagerDemoState();
}class _StatemanagerDemoState extends State<StatemanagerDemo> {int _count = 0;void _increaseCount() {// 这个是关键，只有调用 setState 才能更新页面的数据setState(() {_count += 1;});}@overrideWidget 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});@overrideWidget build(BuildContext context) {return Center(child: ActionChip(label: Text("$count"),onPressed: increaseCount));}
}

2. `StatefulWidget`组件和 `InheritedWidget` 的结合

代码如下：

//-------用InheritedWidget 实现数据的更新------
class StateManagerInheriteDemo extends StatefulWidget {const StateManagerInheriteDemo({super.key});@overrideState<StateManagerInheriteDemo> createState() => _StateManagerInheriteDemoState();
}class _StateManagerInheriteDemoState extends State<StateManagerInheriteDemo> {int _count = 0;void _increaseCount() {setState(() {_count += 1;});}@overrideWidget 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>();@overridebool updateShouldNotify(covariant InheritedWidget oldWidget) {return true;}
}// 模拟多个层级1
class CounterWidgetInherite extends StatelessWidget {const CounterWidgetInherite ({super.key});@overrideWidget build(BuildContext context) {return Center(child: Counter(),);}
}// 模拟多个层级2
class Counter extends StatelessWidget {const Counter({super.key});@overrideWidget 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});@overrideWidget 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});@overrideWidget 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…...

编程日记 2025/5/11 13:13:55

淘宝订单列表Fragment转场动画卡顿解决方案

如何应对产品形态与产品节奏相对确定情况下转变为『在业务需求与产品形态高度不确定性的情况下，如何实现业务交付时间与交付质量的确定性』。我们希望通过混合架构（Native 业务容器 Weex 2.0）作为未来交易终端架构的重要演进方向&#xff0c…...

编程日记 2025/5/11 12:52:10

【状态空间方程】对于状态空间方程矩阵D≠0时的状态反馈与滑模控制

又到新的一年啦，2025新年快乐~。前几个月都没更新，主要还是因为不能把项目上的私密工作写进去，所以暂时没啥可写的。最近在山里实习，突然想起年前遗留了个问题一直没解决，没想到这两天在deepseek的加持下很快解决了&am…...

编程日记 2025/5/11 12:25:10

执行命令 git config --global alias.lg "log --graph --prettyformat:%C(red)%h%C(reset) - %C(yellow)%d%C(reset) %C(magenta)<%an>%C(reset) %C(cyan)(%ad)%C(reset) %C(green)%s%C(reset) (%cr) --abbrev-commit --dateformat:%Y-%m-%d %H:%M:%S"...

编程日记 2025/5/11 12:22:00

PySide（PyQT）使用场景（QGraphicsScene）进行动态标注的一个demo

用以标注图像的一个基本框架demo import sys from PySide6.QtWidgets import QApplication, QGraphicsView, QGraphicsScene, QMainWindow, QLabel, QGraphicsPixmapItem from PySide6.QtGui import QPixmap, QPainter, QTransform from PySide6.QtCore import Qt, QPointF, S…...

编程日记 2025/5/6 10:59:06

LeetCode每日精进：876.链表的中间结点

题目链接：876.链表的中间结点题目描述： 给你单链表的头结点 head ，请你找出并返回链表的中间结点。如果有两个中间结点，则返回第二个中间结点。示例 1： 输入：head [1,2,3,4,5] 输出：[3,4,5…...

编程日记 2025/5/11 12:08:27

ollama实践笔记

目录一、linux安装文件命令： 二、启动ollama 三、linux 如何把ollama serve做为服务方式启动四、安装deepseek-r1 五、如何在网页中使用ollama？ ‌5.1 安装Open WebUI【不推荐】 5.2 安装ollama-webui-lite 六、Ubuntu安装docker、只需要一句话…...

编程日记 2025/5/11 12:01:52

联想电脑如何进入BIOS?

打开设置下滑找到更新与安全点击恢复和立即重新启动选择疑难解答选择UEFI固件设置然后如果有重启点击重启重启开机时一直点击FNF10进入BIOS界面...

编程日记 2025/5/11 12:15:46

CentOS本机配置为时间源

CentOS本机配置为时间源安装chrony，默认已安装修改配置文件 /etc/chrony.conf客户端配置安装chrony，默认已安装 yum -y install chrony修改配置文件 /etc/chrony.conf # cat /etc/chrony.conf | grep -Ev "^$|#" server ceph00 iburst dri…...

编程日记 2025/5/11 13:05:55

使用 EDOT 监测由 OpenAI 提供支持的 Python、Node.js 和 Java 应用程序

作者：来自 Elastic Adrian Cole Elastic 很自豪地在我们的 Python、Node.js 和 Java EDOT SDK 中引入了 OpenAI 支持。它们为使用 OpenAI 兼容服务的应用程序添加日志、指标和跟踪，而无需任何代码更改。介绍去年，我们宣布了 OpenTelemetry…...

编程日记 2025/5/11 11:54:26

微信小程序网络请求封装

微信小程序的网络请求为什么要封装？封装使用有什么好处？ 封装的目的是为了偷懒，试想一下每次都要wx.request，巴拉巴拉传一堆参数，是不是很麻烦，有些公共的参数例如header，baseUrl是不是可以封装…...

编程日记 2025/5/6 0:00:28

【自学笔记】人工智能基础知识点总览-持续更新

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档文章目录人工智能重点知识点总览一、基础概念与原理1.1 人工智能定义与发展1.2 算法与数据结构1.3 数学基础二、机器学习2.1 监督学习2.2 无监督学习2.3 强化学习三、深度…...

编程日记 2025/5/11 13:10:45

Docker 常用命令基础详解（二）

四、容器操作命令 4.1 运行容器使用docker run命令可以创建并运行一个容器，它就像是一个神奇的 “启动器”，让镜像中的应用程序在容器中运行起来。其基本语法为： docker run [OPTIONS] IMAGE [COMMAND] [ARG...] 其中，OPTIONS…...

编程日记 2025/5/11 11:56:34

初学java 数据库相关学习

创建数据库： 主键: unsigned primary key auto_increment 外键: foreign key(xx) references table_name(xx) 字段: 类型: int ; tinyint ;char(20);varchar(255); date; datetime; text; float(5,2); double(10,2); long; decimal(15,10) 约束:primary key; foreig…...

编程日记 2025/5/11 12:43:36

ARM64 Trust Firmware [一]

ARMv8 启动流程： 在《RK3568上电启动流程 [十五]》中，简单介绍了 RK3568 的上电启动过程，本篇再详细分解其启动流程。在 ARMv8 架构中，启动流程包含多个阶段，这些阶段被称为 BL （bootloader） …...

编程日记 2025/4/30 11:15:00

K8S容器启动提示：0/2 nodes are available: 2 Insufficient cpu.

问题：K8S的容器启动报错0/2 nodes are available: 2 Insufficient cpu. 原因：Pod的资源请求（requests）设置不当：在Kubernetes中，调度器根据Pod的requests字段来决定哪个节点可以运行该Pod。如果一个Pod声明…...

编程日记 2025/5/1 4:07:30

数据结构:图论入门

图论起源于欧拉对哥尼斯堡七桥问题的解决. 他构建的图模型将陆地用点来表示, 桥梁则用线表示, 如此一来, 该问题便转化为在图中能否不重复地遍历每条边的问题. 图论的应用地图着色在地图着色问题中, 我们用顶点代表国家, 将相邻国家之间用边相连. 这样, 问题就转化为用最少…...

编程日记 2025/5/11 0:24:22

DataBase【MySQL基础夯实使用说明（下）】

MySQL数据库 🏆当领导表示关心时，您怎么回复？ ⚠️不要傻傻的说应该的，这样不仅会抹杀掉你的辛苦，也让领导没办法接话！ 🔔文章末尾彩蛋！ 文章目录 MySQL数据库前言一、约束1.1.外键…...

编程日记 2025/5/11 13:12:51

Golang的多团队协作编程模式与实践经验

Golang的多团队协作编程模式与实践经验一、多团队协作编程模式概述在软件开发领域，多团队协作编程是一种常见的工作模式。特别是对于大型项目来说，不同团队间需要协同合作，共同完成复杂的任务。Golang作为一种高效、并发性强的编程语言&…...

编程日记 2025/5/11 11:59:47

详解spotbugs -textui常用命令（包括生成html测试报告）

用命令运行spotbugs 本文默认大家了解spotbugs的基础使用，如果不了解可以参考文章使用神器Spotbugs，轻松入门静态代码分析-CSDN博客我们在使用spotbugs 对Java代码进行静态分析，查找相关的漏洞时通常在使用Maven和Gradle进行构建的过程中…...

编程日记 2025/5/11 12:16:49

C++：Map和Set

目录一、关联式容器二、键值对三、树形结构的关联式容器 A.set的模板参数列表 B.set的构造 C.set的迭代器 D.set的容量 E.set的修改操作 F.set的使用举例 A.map的模板参数列表 B.map的构造 C.map的迭代器 D.map的容量 E.map中元素的修改 operator[ ] insert()…...

编程日记 2025/5/8 17:05:28

【Unity Shader编程】之顶点着色器

来一张AI提供的资料在shader编程中，定义的结构体，有些是会被自动赋值，有些是必须要手动赋值的，这就涉及到了语义， 例如 struct appdata{float4 vertex : POSITION;float vertex2;float2 uv : TEXCOORD0;};结构体里面定…...

编程日记 2025/5/6 15:49:47

Hive之[Hive]详细安装步骤

hive 是依赖hadoop中的hdfs作为存储，依赖mysql管理元数据 master节点集群环境 master 192.168.204.130 slave1 192.168.204.131 slave2 192.168.204.132组件下载地址 https://archive.apache.org/dist/hive/hive-1.2.2/ 或链接: https://pan.baidu.com/s/1…...

编程日记 2025/5/11 13:07:15

3.【线性代数】——矩阵乘法和逆矩阵

三矩阵乘法和逆矩阵 1. 矩阵乘法1.1 常规方法1.2 列向量组合1.3 行向量组合1.4 单行和单列的乘积和1.5 块乘法 2. 逆矩阵2.1 逆矩阵的定义2.2 奇异矩阵2.3 Gauss-Jordan 求逆矩阵2.3.1 求逆矩阵 ⟺ \Longleftrightarrow ⟺解方程组2.3.2 Gauss-Jordan求逆矩阵 1. 矩阵乘法 1.…...

编程日记 2025/5/11 12:13:45

手动配置IP

手动配置IP，需要考虑四个配置项： 四个配置项 IP地址、子网掩码、默认网关、DNS服务器 IP地址：格式表现为点分十进制，如192.168.254.1 子网掩码：用于区分网络位和主机位【子网掩码的二进制表达式一定是连续的&#…...

编程日记 2025/5/7 17:34:26

unity is running as administrator 管理员权限问题

每次打开工程弹出unity is running as administrator的窗口 unity版本2022.3.34f1，电脑系统是win 11系统解决方法一：解决方法二： unity版本2022.3.34f1，电脑系统是win 11系统每次打开工程都会出现unity is running as administr…...

编程日记 2025/5/7 1:28:07

AI在电竞比分网中的主要应用场景

AI在电竞体育比分网的数据应用非常广泛，能够显著提升数据分析、预测、用户体验和商业价值。以下是AI在电竞比分网中的主要应用场景： 1. 实时数据采集与分析比赛数据实时更新：AI通过自动化系统实时采集比赛数据（如击杀数、经济差、…...

编程日记 2025/5/6 20:20:38

消息中间件：RabbitMQ镜像集群部署配置全流程

目录 1、特点 2、RabbitMQ的消息传递模式 2.1、简单模式（Simple Mode） 2.2、工作队列模式（Work Queue Mode） 2.3、发布/订阅模式（Publish/Subscribe Mode） 2.4、路由模式（Routing Mode&am…...

编程日记 2025/5/5 7:22:52

TCP的拥塞控制

什么是TCP的拥塞控制？它的工作原理是什么？为什么需要拥塞控制？ TCP拥塞控制简介想象一下，你和一群朋友在一条狭窄的小路上跑步。如果每个人都拼命跑，小路很快就会变得拥挤不堪，大家互相碰撞，…...

编程日记 2025/5/11 12:04:09

Jenkins 配置 Git Repository 五

Jenkins 配置 Git Repository 五这里包含了 Freestyle project 任务类型和 Pipeline 任务类型关于 Git 仓库的配置，如下不同的任务类型，只是在不同的模块找到配置 Git 仓库找到 Git 仓库配置位置之后，所有的任务类型配置都是一样的 …...

编程日记 2025/5/11 12:11:36

父组件中循环子组件调用

父组件中循环子组件调用父组件 //father.vue <template><view><view v-for"(item,index) in list"><son ref"son"></son></view><buton click"submit">123</buton></view> </templ…...

编程日记 2025/5/11 11:46:51

【网络安全.渗透测试】Cobalt strike（CS）工具使用说明

目录前言一、工具显著优势二、安装 Java 运行环境三、实验环境搭建要点四、核心操作流程详解（一）环境准备与连接步骤（二）主机上线与深度渗透流程五、其他实用功能应用指南（一）office 宏 payload 应用（二）Https Payload 应用（三）信息收集策略 …...

编程日记 2025/4/16 18:56:33

C++ 设计模式-建造者模式

以下是一个完整的C建造者模式示例，包含产品类、建造者接口、具体建造者、指挥者以及测试代码： #include <iostream> #include <string> #include <memory>// 产品类：汽车 class Car { public:void setBody(const std::str…...

编程日记 2025/4/30 9:08:34

【Unity3D】Unable to detect SDK in the selected directory

某天突然发现SDK选中自己的目录或打安卓包时提示SDK Tools相关的报错打开Android Studio的SDK Manager更新Android SDK Tools...

编程日记 2025/5/11 12:18:55

QML使用ChartView绘制饼状图

一、工程配置首先修改CMakeLists.txt，按下图修改： find_package(Qt6 6.4 REQUIRED COMPONENTS Quick Widgets) PRIVATEtarget_link_libraries(appuntitledPRIVATE Qt6::QuickPRIVATE Qt6::Widgets )其次修改main.cpp，按下图修改&#xff…...

编程日记 2025/5/9 0:47:28

ollama本地部署 deepseek离线模型安装一套从安装到UI运行

一、安装本地ollama 1、下载ollama (1)百度网盘windows版本通过网盘分享的文件：OllamaSetup.exe 链接: https://pan.baidu.com/s/15ca6WAzrc4wWph5H9BEOzw 提取码: 283u (2)进入官网：Ollama 2、选择你的系统等待下载完成就可以了。注：这…...

编程日记 2025/5/10 22:02:06

【linux】ubunbu切换到root

在 Ubuntu 中切换到 root 用户有几种方法，具体取决于你的需求和权限配置。以下是常见的几种方式： 1. 使用 sudo 临时切换到 root 如果你当前用户有 sudo 权限，可以使用以下命令临时切换到 root 用户： bash sudo -i 或者&#xff1…...

编程日记 2025/5/5 5:16:27

推理框架对比：ReAct、思维链(COT)和思维树(TOT)谁更胜一筹

推理框架作为 AI 解决复杂问题的核心机制，正逐渐成为研究和应用的焦点。ReAct、思维链（Chain-of-Thought，CoT）（Chain-of-Thought (CoT)：引导大型语言模型解决问题的有效策略）和思维树&#xff0…...

编程日记 2025/5/6 0:21:31

electron.vite 项目创建以及better-sqlite3数据库使用

1.安装electron.vite npm create quick-start/electronlatest中文官网：https://cn.electron-vite.org/ 2. 安装项目依赖 npm i3.修改 electron-builder 配置文件 appId: com.electron.app productName: text33 directories:buildResources: build files:- !**/.v…...

编程日记 2025/5/6 9:08:40

Dockerfiles 的 Top 10 常见 DevOps/SRE 面试问题及答案

1. RUN 和 CMD 之间有什么区别？ RUN : 在镜像构建过程中执行命令，创建一个新的层。通常用于安装软件包。示例: RUN apt-get update && apt-get install -y curlCMD : 指定容器启动时默认运行的命令。它在运行时执行，而不是在构建过程…...

编程日记 2025/5/1 6:20:18

Sentinel——Spring Boot 应用接入 Sentinel 后内存开销增长计算方式

接入 Sentinel 对 Spring Boot 应用的内存消耗影响主要取决于规则数量、资源数量、监控粒度、并发量等因素。 1. 核心内存消耗来源 (1) Sentinel 核心库默认依赖：Sentinel Core 本身占用较小，通常在 10~50MB（取决于资源数量和规则复杂度…...

编程日记 2025/5/8 8:13:00

domain 网络安全网络安全域

文章目录 1、域的概述 1.1、工作组与域1.2、域的特点1.3、域的组成1.4、域的部署概述1.5、活动目录1.6、组策略GPO 2、域的部署实验 2.1、建立局域网，配置IP2.2、安装活动目录2.3、添加用户到指定域2.4、将PC加入域2.5、实验常见问题 3、OU（组织单位…...

编程日记 2025/5/4 2:01:13

OpenCV机器学习（2）提升算法类cv::ml::Boost

操作系统：ubuntu22.04 OpenCV版本：OpenCV4.9 IDE:Visual Studio Code 编程语言：C11 算法描述 cv::ml::Boost 是 OpenCV 机器学习模块中的一部分，用于实现提升算法（Boosting Algorithms）。Boosting 是一种…...

编程日记 2025/5/7 6:00:14

【Java 面试八股文】框架篇

框架篇 1. Spring框架中的单例bean是线程安全的吗？2. 什么是AOP？3. 你们项目中有没有使用到AOP？4. Spring中的事务是如何实现的？5. Spring中事务失效的场景有哪些？6. Spring的bean的生命周期？7. Spring中的…...

编程日记 2025/5/10 17:43:26

基于HAL库的按钮实验

实验目的掌握STM32 HAL库的GPIO输入配置方法。实现通过按钮控制LED亮灭（支持轮询和中断两种模式）。熟悉STM32CubeMX的外部中断（EXTI）配置流程。实验硬件开发板：STM32系列开发板（如STM32F103C8T6、N…...

编程日记 2025/5/11 11:21:18

TCP 端口号为何位于首部前四个字节？协议设计的智慧与启示

知乎的一个问题很有意思：“为什么在TCP首部中要把TCP的端口号放入最开始的四个字节？” 这种问题很适合我这种搞历史的人，大年初一我给出了一个简短的解释，但仔细探究这个问题，我们将会获得 TCP/IP 被定义的过程。文…...

编程日记 2025/5/10 9:49:17

前端实现在PDF上添加标注(1)

前段时间接到一个需求，用户希望网页上预览PDF，同时能在PDF上添加文字，划线，箭头和用矩形框选的标注，另外还需要对已有的标注进行修改，删除。期初在互联网上一通搜索，对这个需求来讲发现了两个问…...

编程日记 2025/5/9 21:15:45

Springboot 中如何使用Sentinel

在 Spring Boot 中使用 Sentinel 非常方便，Spring Cloud Alibaba 提供了 spring-cloud-starter-alibaba-sentinel 组件，可以快速将 Sentinel 集成到你的 Spring Boot 应用中，并利用其强大的流量控制和容错能力。下面是一个详细的步骤指南 …...

编程日记 2025/5/8 6:16:34

如何优化React应用的性能？

文章目录 1. 引言2. 渲染优化2.1 使用 React.memo 避免不必要的重新渲染2.2 使用 shouldComponentUpdate 或 PureComponent2.3 使用 useMemo 和 useCallback 3. 异步渲染与懒加载3.1 使用 React.lazy 和 Suspense 实现懒加载3.2 分割代码（Code-Splitting&#xff09…...

编程日记 2025/5/7 15:08:52

ES的java操作

ES的java操作一、添加依赖在pom文件中添加依赖包 <dependencies><dependency><groupId>org.elasticsearch</groupId><artifactId>elasticsearch</artifactId><version>7.8.0</version></dependency><!-- elastic…...

编程日记 2025/5/4 23:23:30

1. StatefulWidget 更新数据的使用

2. StatefulWidget组件 和 InheritedWidget 的结合

3. scoped_model 的使用

相关文章：

2. `StatefulWidget`组件和 `InheritedWidget` 的结合