Flutter:InheritedWidget数据共享

embedded/2024/11/17 21:28:19/

未使用数据共享时,要传递数据,只能组件间一级一级向下传递

下边代码中,创建了一个按钮,当点击时_count++
并将数据通过Test1(count)传递给Test2(count),最终传递给Test3(count)进行渲染展示。

import 'package:flutter/material.dart';class Demo extends StatefulWidget {@overrideState<Demo> createState() => _DemoState();
}class _DemoState extends State<Demo> {int _count = 0;@overrideWidget build(BuildContext context) {return Column(children: [Test1(_count),ElevatedButton(onPressed: (){_count++;setState(() {});}, child: Text('我是按钮'))],)}
}class Test1 extends StatelessWidget {final int count;Test1(this.count);@overrideWidget build(BuildContext context) {return Test2(count);}
}class Test2 extends StatelessWidget {final int count;Test2(this.count);@overrideWidget build(BuildContext context) {return Test3(count);}
}class Test3 extends StatefulWidget {final int count;Test3(this.count);@overrideState<Test3> createState() => _Test3State();
}class _Test3State extends State<Test3> {@overrideWidget build(BuildContext context) {return Text(widget.count.toString());}
}

InheritedWidget数据共享,优化下上边代码

import 'package:flutter/material.dart';// 声明MyData类 继承 InheritedWidget
class MyData extends InheritedWidget{// 在子组件中需要共享的数据final int data;// 构造方法const MyData({required this.data, child}):super(child: child);// 对外提供方法,方便在子组件中获取共享的数据static MyData? of(BuildContext context){return context.dependOnInheritedWidgetOfExactType<MyData>();}// 该回调决定当前data发生变化的时候,是否通知子组件依赖data的Widget:子组件中只有使用了MyData.of(context)!.data 的才会产生依赖关系@overridebool updateShouldNotify(covariant MyData oldWidget) {// 如果旧的data不等于新的data,返回true,子组件依赖data的Widget(就看子组件build中是否使用了MyData.of(context)!.data):就会触发生命周期:didChangeDependencies// 如果return false; 则不会触发:didChangeDependenciesreturn oldWidget.data != data;}
}class Demo extends StatefulWidget {@overrideState<Demo> createState() => _DemoState();
}class _DemoState extends State<Demo> {int _count = 0;@overrideWidget build(BuildContext context) {// MyData在Widget树中必须是根,MyData里边的数据才能产生共享return MyData(data: _count,child: Column(children: [SizedBox(height: 100,),Test1(_count),ElevatedButton(onPressed: (){_count++;setState(() {});}, child: Text('我是按钮'))],),);}
}class Test1 extends StatelessWidget {final int count;Test1(this.count);@overrideWidget build(BuildContext context) {return Test2(count);}
}class Test2 extends StatelessWidget {final int count;Test2(this.count);@overrideWidget build(BuildContext context) {return Test3(count);}
}class Test3 extends StatefulWidget {final int count;Test3(this.count);@overrideState<Test3> createState() => _Test3State();
}class _Test3State extends State<Test3> {@overridevoid didChangeDependencies() {// 如果有很多逻辑依赖这个数据,可以在这里进行保存print('didChangeDependencies:调用了');super.didChangeDependencies();}@overrideWidget build(BuildContext context) {// return Text(widget.count.toString());print('当数据发生变化,build重新渲染');return Text(MyData.of(context)!.data.toString());}
}

http://www.ppmy.cn/embedded/138348.html

相关文章

麒麟系统下docker搭建jenkins

首先我们需要创建宿主机挂载路径&#xff0c;我这里放在本地的/data/henkins/home,然后赋予权限&#xff0c;命令如下&#xff1a; mkdir -p /data/jenkins/home chown -R 1000:1000 /data/jenkins/home chmod -R 777 /data/jenkins/homedocker run -d --restart …

【小白可懂】微信小程序---课表渲染

结果展示&#xff1a;&#xff08;代码在最后&#xff09; WeChat_20241116174431 项目简介 在数字化校园建设的大背景下&#xff0c;为了更好地服务于在校师生&#xff0c;我们开发了一款基于微信小程序的课表管理系统。该系统采用了现代化的前端技术和优雅的设计风格&#x…

leetcode hot100【LeetCode 5.最长回文子串】java实现

LeetCode 5.最长回文子串 题目描述 给定一个字符串 s&#xff0c;找到 s 中最长的回文子串。 示例 1: 输入: s "babad" 输出: "bab" 解释: "aba" 也是一个有效答案。示例 2: 输入: s "cbbd" 输出: "bb"说明: 1 <…

Ollama—87.4k star 的开源大模型服务框架!!

这一年来&#xff0c;AI 发展的越来越快&#xff0c;大模型使用的门槛也越来越低&#xff0c;每个人都可以在自己的本地运行大模型。今天再给大家介绍一个最厉害的开源大模型服务框架——ollama。 项目介绍 Ollama 是一个开源的大语言模型&#xff08;LLM&#xff09;服务工具…

什么是Web 3.0?

web 3.0是非常火的一个概念了&#xff0c;就算你不知道他具体是什么&#xff0c;但是你也一定听说过这个名词。 但是Web 3.0中又夹杂着很多其他的概念&#xff0c;比如币、DeFi、DeApps、NFT、元宇宙&#xff0c;等等更多其他的概念&#xff0c;所以很多人就更难理解了。这篇文…

【ACM出版】第四届信号处理与通信技术国际学术会议(SPCT 2024)

& 第四届信号处理与通信技术国际学术会议&#xff08;SPCT 2024&#xff09; 2024 4th International Conference on Signal Processing and Communication Technology 2024年12月27-29日 中国深圳 www.icspct.com 第四届信号处理与通信技术国际学术会议&#x…

sql数据库-排序查询-DQL

目录 语法 排序方式 举例 将表按年龄从小到大排序 将表按年龄从大到小排序 ​编辑 多重排序 将表按年龄升序&#xff0c;年龄相同按入职时间降序 语法 select * from 表名 order by 字段名1 排序方式1&#xff0c;字段2 排序方式2; 排序方式 升序&#xff1a;ASC&…

<项目代码>YOLOv8 草莓成熟识别<目标检测>

YOLOv8是一种单阶段&#xff08;one-stage&#xff09;检测算法&#xff0c;它将目标检测问题转化为一个回归问题&#xff0c;能够在一次前向传播过程中同时完成目标的分类和定位任务。相较于两阶段检测算法&#xff08;如Faster R-CNN&#xff09;&#xff0c;YOLOv8具有更高的…