Flutter InheritedWidget 共享状态管理

InheritedWidget和React中的context功能类似,可以实现跨组件数据的传递。
定义一个共享数据的InheritedWidget,需要继承自InheritedWidget

  • 这里定义了一个of方法,该方法通过context开始去查找祖先的HYDataWidget(可以查看源码查找过程)
  • updateShouldNotify方法是对比新旧HYDataWidget,是否需要对更新相关依赖的Widget
// 数据共享
class DataWidget extends InheritedWidget {
// 1、共享的数据final int counter;
// 2、定义构造方法const DataWidget({super.key, required this.counter, required Widget child}): super(child: child);
// 3、获取组件最近的当前InheritedWidgetstatic DataWidget? of(BuildContext context) {// 沿着Element树,去找最近的CounterElement,从Element中取出Widget对象return context.dependOnInheritedWidgetOfExactType();}// 4、 决定要不要回调State中的didChangeDependencies 方法bool updateShouldNotify(covariant DataWidget oldWidget) {// 如果返回true:执行依赖当前的InheritedWidget的state中的  didChangeDependenciesreturn counter != oldWidget.counter;}
}

使用定义的 DataWidget 共享数据

class _MyHomePageState extends State<MyHomePage> {HomeRequest homeRequest = HomeRequest();int data = 100; // 定义一个共享数据变量void initState() {super.initState();Logs("_MyHomePageState", StackTrace.current);homeRequest.getMovieTopList(0, 20).then((value) {});}Widget build(BuildContext context) {return Scaffold(// 脚手架appBar: AppBar(title: Text(widget.title),),body: DataWidget( // 需要在共享数据组件的父类上继承DataWidgetcounter: data, // 将数据传递给共享数据 counterchild: Center(child: Column(mainAxisAlignment: MainAxisAlignment.center,children: [HYShowData01(),HYShowData02(),],),)),// 定义一个 按钮点击自动增加数据floatingActionButton: FloatingActionButton(child: Icon(Icons.add),onPressed: () {setState(() {data++;});},),);}
}class HYShowData01 extends StatelessWidget {Widget build(BuildContext context) {int? _counter = DataWidget.of(context)?.counter; // 使用共享数据return Container(color: Colors.red,child: Text("共享状态:${_counter}"),);}
}class HYShowData02 extends StatefulWidget {State<HYShowData02> createState() => _HYShowData02State();
}class _HYShowData02State extends State<HYShowData02> {void didChangeDependencies() {// TODO: implement didChangeDependenciessuper.didChangeDependencies();}Widget build(BuildContext context) {int? _counter = DataWidget.of(context)?.counter;return Container(color: Colors.blue,child: Text("共享状态:${_counter}"),);}
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/18744.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

安防视频监控平台EasyCVR修改参数提示database or disk is full的原因排查

EasyDarwin开源流媒体视频EasyCVR安防监控平台可提供视频监控直播、云端录像、云存储、录像检索与回看、智能告警、平台级联、云台控制、语音对讲、智能分析等能力。视频监控综合管理平台EasyCVR具备视频汇聚融合能力&#xff0c;平台基于云边端一体化架构&#xff0c;具有强大…

SPDK的块设备抽象层,从一个简单的示例程序讲起

最早的SPDK仅仅是一个NVMe驱动,但现在的SPDK已经不是原来的SPDK了,其功能涵盖了整个存储栈。为了能够实现丰富的功能,SPDK实现了一个块设备抽象层,其功能与Linux内核的块设备层类似,这个块设备抽象层称为BDEV。 块设备抽象层BDEV在整个SPDK栈中的位置如图所示,它位于中间…

Win10 拖动文件从文件夹里复制到桌面时出现黑屏资源管理器重启复制失败

环境&#xff1a; Win10 专业版 联想E14笔记本 问题描述&#xff1a; 在文件移动复制时&#xff0c;从文件夹拖拽复制到桌面时&#xff0c;会卡顿&#xff0c;电脑黑屏闪一下&#xff0c;资源管理器重启&#xff0c;复制失败 解决方案&#xff1a; 1.sfc /scannow&#x…

2023年第四届“华数杯”数学建模思路 - 复盘:光照强度计算的优化模型

文章目录 0 赛题思路1 问题要求2 假设约定3 符号约定4 建立模型5 模型求解6 实现代码 0 赛题思路 &#xff08;赛题出来以后第一时间在CSDN分享&#xff09; https://blog.csdn.net/dc_sinor?typeblog 1 问题要求 现在已知一个教室长为15米&#xff0c;宽为12米&#xff0…

SpringBoot中ErrorPage(错误页面)的使用--【ErrorPage组件】

SpringBoot系列文章目录 SpringBoot知识范围-学习步骤–【思维导图知识范围】 文章目录 SpringBoot系列文章目录本系列校训 SpringBoot技术很多很多环境及工具&#xff1a;必要的知识深层一些的知识 上效果图在Spring Boot里使用ErrorPage还要注意的是 配套资源作业&#xff…

逆波兰表达式求值

给你一个字符串数组 tokens &#xff0c;表示一个根据 逆波兰表示法 表示的算术表达式。 请你计算该表达式。返回一个表示表达式值的整数。 注意&#xff1a; 有效的算符为 、-、* 和 / 。每个操作数&#xff08;运算对象&#xff09;都可以是一个整数或者另一个表达式。两个…

AI绘画| 迪士尼风格|可爱头像【附Midjourney提示词】

Midjourney案例分享 图片预览 迪士尼风格&#xff5c;可爱头像 高清原图及关键词Prompt已经放在文末网盘&#xff0c;需要的自取 在数字艺术的新时代&#xff0c;人工智能绘画已经迅速崭露头角。作为最先进的技术之一&#xff0c;AI绘画结合了艺术和科学&#xff0c;开启了一…

Vue3 element-plus表单嵌套表格实现动态表单验证

Vue3结合element-plus表单项可以动态添加/删除 部分效果图如下&#xff1a; 另表格有添加和删除按钮&#xff0c;点击提交进行表单验证。 首先data格式必须是对象包裹数组 import { ref, reactive } from vue; import { FormInstance } from element-plus const froms re…

【Vue3项目实战】vue3项目配置页面切换过渡动画

文章目录 一、先看效果二、全量代码三、注意事项虽然Vue3支持 template 下存在多个根节点&#xff0c;但是 transition 过渡动画并不支持&#xff0c;要实现过渡动画的页面&#xff0c;都需要有一个根标签包裹页面内容&#xff0c;否则就会报如下警告: 四、相关文章友链本专栏记…

Docker run 启动容器报错

今天在Windows下启动docker容器发现的三个错误&#xff1a; Ports are not available: exposing port TCP 0.0.0.0:1521 -> 0.0.0.0:0: listen tcp 0.0.0.0:1521: bind: Only one usage of each socket address (protocol/network address/port) is normally permitted. 端口…

前端文件上传 、下载

一、文件上传 import { importData } from /api.js;async importFn() {// 文件数据let file null; // 文件使用form-data格式&#xff0c;参数使用json格式let formData new FormData();formData.append("excel", file);formData.append("excelQuery", …

阿里云ECS部署Mysql数据库

说明 首先需要到阿里云官方购买阿里云产品 &#xff0c;如果有机会可以免费试用那会更好&#xff0c;跳过购买云服务步骤下面直接演示。 一、阿里云官网示意图 1.百度搜索 阿里云官方 2.点击控制台 3.展开更多 4. 选择云服务器ECS 5. 点击实例 可以看到服务器状态&#xff…

EXCEL,vlookup以及数据去重

1&#xff0c;新建一个work表格&#xff0c;将数据copy进来&#xff0c;并做简单处理&#xff0c;让看起来舒服 2&#xff0c;使用vlookup函数查找数据是否在库中 注意:上图中的Table_array A1:C152&#xff0c;这个值要加绝对引用&#xff0c;写成&#xff1a; $A$1:$C$15…

每个开发人员都应了解的 SOLID 原则

每个开发人员都应了解的 SOLID 原则 面向对象的编程类型为软件开发带来了全新的设计。 这使开发人员能够将具有相同目的/功能的数据合并到一个类中&#xff0c;以处理该类的唯一目的&#xff0c;而无需考虑整个应用程序。 但是&#xff0c;这种面向对象编程并不能防止程序混乱或…

如何避免GCC优化选项对程序带来的干扰?

引言 先从一小段代码说起&#xff1a; #include <stdio.h>int main() {int sum 0;for (int i 0; i < 100; i) {sum i;}printf("sum %d\n", sum);return 0; }将代码以-O2选项编译后&#xff0c;查看目标程序中的汇率指令&#xff1a; gcc test.c -O2 o…

PHP: 开发入门macOS系统下的安装和配置

安装Homebrew 安装 ~~友情提示&#xff1a;这个命令对网络有要求&#xff0c;可能需要翻墙或者用你的手机热点试试&#xff0c;或者把DNS换成&#xff08;114.114.114.114 和 8.8.8.8&#xff09; /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebr…

centos7 部署Tomcat和jpress应用

目录 一、静态、动态、伪静态 二、Web 1.0 和 Web 2.0 三、centos7 部署Tomcat 3.1 安装、配置jdk 3.2 安装 Tomcat 3.3 配置服务启动脚本 3.3.1 创建用户和组 3.3.2 创建tomcat.conf文件 3.3.3 创建服务脚本(tomcat.service) 3.3.4 重新加载守护进程并且测试 四、部…

webpack

文章目录 webpack概念打包的场景为什么要打包在打包之外 - 翻译在打包之外 - 小动作 课程重点模块化利用立即执行函数来改变 作用域模块化的优点模块化方案的进化史AMD&#xff08;成型比较早&#xff0c;应用不是很广泛&#xff09;COMMONJSES6 MODULE webpack 的打包机制webp…

【前端知识】React 基础巩固(四十四)——其他Hooks(useContext、useReducer、useCallback)

React 基础巩固(四十四)——其他Hooks&#xff08;useContext、useReducer、useCallback&#xff09; 一、useContext的使用 在类组件开发时&#xff0c;我们通过 类名.contextType MyContext的方式&#xff0c;在类中获取context&#xff0c;多个Context或者在函数式组件中…

手机设置全局代理ip步骤

在互联网时代&#xff0c;隐私和安全问题备受关注。使用全局代理能够帮助我们保护个人信息&#xff0c;突破地理限制&#xff0c;并提高网络速度。但是&#xff0c;你是否对全局代理的安全性存有疑虑&#xff1f;而且&#xff0c;如何在手机上设置全局代理呢&#xff1f;今天就…