flutter鸿蒙next 使用 InheritedWidget 实现跨 Widget 传递状态
在 Flutter 中,状态管理是开发过程中一个至关重要的部分。Flutter 提供了多种方式来实现组件间的状态传递,其中一种比较底层的方式是使用 InheritedWidget。虽然 InheritedWidget 主要用于将数据传递给其子树中的小部件,但它也是许多更高级状态管理解决方案(如 Provider)的基础。本文将详细介绍如何使用 InheritedWidget 来实现跨 Widget 的状态传递。
1. InheritedWidget 基础介绍
InheritedWidget 是 Flutter 框架提供的一个特殊 Widget,它允许数据在 Widget 树中向下传递。当一个 Widget 需要跨越多个子 Widget 传递数据时,可以将数据保存在 InheritedWidget 中,并让它作为一个数据的容器。所有依赖于这个 InheritedWidget 的子 Widget,都能方便地获取到这些数据。
InheritedWidget 的工作原理
InheritedWidget主要依赖of方法来从 Widget 树的不同位置读取数据。InheritedWidget会在其child发生变化时触发树重建。这意味着它不仅可以传递数据,还能在数据发生变化时自动更新界面。
2. 示例代码:实现一个简单的计数器
为了让大家更清楚地理解 InheritedWidget 的使用,我们通过实现一个简单的计数器来展示它是如何跨 Widget 传递状态的。
完整代码
import 'package:flutter/material.dart';// 1. 创建一个 InheritedWidget,用于传递状态
class CounterInheritedWidget extends InheritedWidget {final int counter;final Function() increment;CounterInheritedWidget({Key? key,required this.counter,required this.increment,required Widget child,}) : super(key: key, child: child);// 创建一个方法,方便其他组件获取到当前的 CounterInheritedWidget 实例static CounterInheritedWidget of(BuildContext context) {final result = context.dependOnInheritedWidgetOfExactType<CounterInheritedWidget>();assert(result != null, 'No CounterInheritedWidget found in context');return result!;}@overridebool updateShouldNotify(CounterInheritedWidget oldWidget) {// 当 counter 发生变化时,通知子 Widget 进行更新return counter != oldWidget.counter;}
}// 2. 创建一个使用 CounterInheritedWidget 的页面
class CounterPage extends StatelessWidget {@overrideWidget build(BuildContext context) {// 获取状态数据final counter = CounterInheritedWidget.of(context).counter;final increment = CounterInheritedWidget.of(context).increment;return Scaffold(appBar: AppBar(title: Text('InheritedWidget Counter')),body: Center(child: Column(mainAxisAlignment: MainAxisAlignment.center,children: <Widget>[Text('Counter Value: $counter', style: TextStyle(fontSize: 30)),SizedBox(height: 20),ElevatedButton(onPressed: increment,child: Text('Increment'),),],),),);}
}// 3. 创建一个 StatefulWidget 来管理数据并使用 CounterInheritedWidget
class CounterApp extends StatefulWidget {@override_CounterAppState createState() => _CounterAppState();
}class _CounterAppState extends State<CounterApp> {int _counter = 0;// 增加计数void _incrementCounter() {setState(() {_counter++;});}@overrideWidget build(BuildContext context) {return CounterInheritedWidget(counter: _counter,increment: _incrementCounter,child: CounterPage(),);}
}void main() {runApp(MaterialApp(home: CounterApp()));
}
代码解释
1. CounterInheritedWidget 类
CounterInheritedWidget 是继承自 InheritedWidget 的自定义类,它将计数器的值和 increment 方法封装在其中。这个 Widget 会被用来向下传递数据(在这里是计数器的值和一个函数)。
- 构造函数:接收
counter(计数器的值)、increment(增加计数的函数)和child(需要显示的子组件)。 of方法:是一个静态方法,用于从BuildContext获取到最近的CounterInheritedWidget实例。它会从当前上下文的InheritedWidget树中向上查找,找到最近的CounterInheritedWidget并返回。updateShouldNotify方法:当CounterInheritedWidget的counter值变化时,返回true,通知 Widget 树的依赖此 Widget 的所有子 Widget 重新构建。
2. CounterPage 页面
CounterPage 是显示计数器值的页面,它通过 CounterInheritedWidget.of(context) 来获取 counter 和 increment。increment 是一个回调函数,用来更新计数器的值,counter 是计数器的当前值。
3. CounterApp 类
CounterApp 是一个 StatefulWidget,负责管理计数器的状态。它的 build 方法返回一个 CounterInheritedWidget,并将 _counter 和 _incrementCounter 传递给它。这个 Widget 作为根 Widget 包裹 CounterPage,让计数器的值和方法能够通过 InheritedWidget 传递给页面中的所有子 Widget。
4. 启动应用
main 方法启动应用,设置 CounterApp 为根 Widget。CounterApp 会初始化计数器的状态并通过 CounterInheritedWidget 传递给 CounterPage,使得子 Widget 可以访问和更新状态。
3. 如何工作?
CounterInheritedWidget将counter和increment方法传递给其子树中的CounterPage。CounterPage通过CounterInheritedWidget.of(context)方法获取CounterInheritedWidget实例,从而访问counter和increment。- 当按下 "Increment" 按钮时,
_incrementCounter被调用,导致setState被触发,_counter的值更新。由于CounterInheritedWidget中的counter值发生变化,它会通知所有依赖它的 Widget 重新构建。最终,CounterPage重新渲染,显示更新后的计数器值。
4. 小结
使用 InheritedWidget 可以让我们方便地将数据传递到 Widget 树的深层。它的优势在于:
- 提供了一种高效、性能优化的状态传递方式。
- 可以在多层嵌套的 Widget 中传递数据,避免了通过
setState或回调的层层传递。
虽然 InheritedWidget 功能强大,但它的使用较为底层,Flutter 也提供了 Provider 等更高级的状态管理工具,可以在更复杂的应用中提供更加灵活和简洁的状态管理方案。
相关文章:
flutter鸿蒙next 使用 InheritedWidget 实现跨 Widget 传递状态
在 Flutter 中,状态管理是开发过程中一个至关重要的部分。Flutter 提供了多种方式来实现组件间的状态传递,其中一种比较底层的方式是使用 InheritedWidget。虽然 InheritedWidget 主要用于将数据传递给其子树中的小部件,但它也是许多更高级状…...
计算机的错误计算(一百四十六)
摘要 探讨 MATLAB 中正切函数 tan(x)、余切函数 cot(x) 关于 附近数的计算精度问题。 例1. 已知 计算 直接贴图吧: 另外,16位的正确值分别为 -0.7837941516239115e10、-0.1275845192169577e-9、0.4782331334117711e7 与 0.2091030357653982e-…...
国标GB28181视频平台EasyCVR私有化视频平台工地防盗视频监控系统方案
一、方案背景 在当代建筑施工领域,安全监管和防盗监控是保障工程顺利进行和资产安全的关键措施。随着科技进步,传统的监控系统已不足以应对现代工地的安全挑战。因此,基于国标GB28181视频平台EasyCVR的工地防盗视频监控系统应运而生…...
CUDA系统学习之一软件堆栈架构
一、CPU与GPU体系架构 计算单元分布 CPU: 少量强大的ALU(算术逻辑单元),通常4-8个核心GPU: 大量小型ALU,成百上千个计算核心特点:GPU更适合并行计算,可以同时处理大量数据控制单元(Control) CPU: 较大的控制单元,复杂的…...
SpringBoot项目中替换指定版本的tomcat
需求:项目使用的SpringBoot框架,因低版本的tomcat的有安全漏洞,根据安全要求需要将项目的tomcat版本升级到9.0.89以上版本。 解决办法: 1、在pom.xml中排除SpringBoot的默认tomcat依赖; <dependency><groupId…...
【5.10】指针算法-快慢指针将有序链表转二叉搜索树
一、题目 给定一个单链表,其中的 元素按升序排序 ,将其转换为 高度平衡的二叉搜索树 。 本题中,一个高度平衡二叉树是指一个二叉树每个节点的左右两个子树的高度差的绝对值不超过 1。 示例: 给定的有序链表: [ -10 , -3 , 0 , …...
机器学习—前向传播的一般实现
可以写一个函数来实现一个密集的层,那是神经网络的单层,所以定义稠密函数,它将上一层的激活作为输入以及给定层神经元的参数w和b。看下边图片所展示的例子,把所有这些权重向量堆叠成一个矩阵,wnp.array([[1,-3,5][2,4,…...
极狐GitLab 签约足下科技,加速国产智驾操作系统的发展与普及
客户背景 足下科技是一家致力于成为智能汽车软件平台、产品与服务领导者的高科技企业,成立于 2022年 3 月,总部位于深圳市。足下科技自主研发的智能驾驶操作系统 Earth 和 Air 工具链,协助OEM和Tier1厂商降低算法和软件开发难度,…...
20241102在荣品PRO-RK3566开发板的预置Android13下适配宸芯的数传模块CX6603N
20241102在荣品PRO-RK3566开发板的预置Android13下适配宸芯的数传模块CX6603N 2024/11/2 18:04 在WIN10使用程序:ViewLink-4.0.7_0708-windows-x64.exe 在荣品PRO-RK3566开发板的预置Android13下使用:ViewLink-2023_12_21-release-0.2.6.apk adb install…...
力扣(leetcode)题目总结——哈希表篇
leetcode 经典题分类 链表数组字符串哈希表二分法双指针滑动窗口递归/回溯动态规划二叉树辅助栈 本系列专栏:点击进入 leetcode题目分类 关注走一波 前言:本系列文章初衷是为了按类别整理出力扣(leetcode)最经典题目,…...
AWS RDS Oracle hit ORA-39405
报错信息: ORA-39405: Oracle Data Pump does not support importing from a source database with TSTZ version 42 into a target database with TSTZ version 35. 分析过程: 这个报错是由于timezone_file的版本,源端比目标端高…...
Dinky中配置Flink集群
需要启动yarn-session 进程,在集群服务器 cd /pwd//flink/bin yarn-session -d 启动成功后可以在yarn的资源管理队列进行查看 启动成功后会给出:JobManager Web Interface 在dinky中进行配置: 集群配置 Hadoop 配置: H…...
通讯录(C 语言)
目录 一、通讯录设计思路1. 伪代码设计思路2. 代码设计思路 二、代码实现三、程序运行演示四、整体分析 一、通讯录设计思路 1. 伪代码设计思路 通讯录可以用来存储 100 个人的信息,每个人的信息包括:姓名、性别、年龄、电话、住址。 提供方法&#x…...
对比Java和TypeScript中的服务注册和查找机制
文章目录 一、Java中的服务注册和查找二、TypeScript中的服务注册和查找2.1 使用依赖注入(DI)框架2.2 injectable原理2.3 使用TypeScript的反射系统实现依赖注入 三、优缺点分析3.1 Java的ServiceLoader3.2 TypeScript的服务注册和查找 四、结论 在构建大…...
Flutter 主流常用第三方库、插件收集
一、Flutter 学习资料 FlutterFlutter官网Flutter中文网咸鱼技术掘金Flutter专栏 Flutter - Dart中(.)、(..)、(...)语法使用_flutter ...-CSDN博客 Flutter pubspec.yaml 配置文件_flutter yaml配置git-CSDN博客 Flutter 添加 example流程_建flutter 工程 怎么自动有example-C…...
【在Linux世界中追寻伟大的One Piece】多路转接select
目录 1 -> I/O多路转接之select 1.1 -> 初识select 1.2 -> select函数原型 1.3 -> 关于fd_set结构 1.4 -> 关于timeval结构 2 -> 理解select执行过程 2.1 -> Socket就绪条件 2.2 -> select特点 2.3 -> select缺点 3 -> select使用示例…...
补一下 二维 平面直角坐标系 到三维
上一篇帖子写到 二维的平面直角坐标系,是那样的,这次补充一下三维的。首先需要,安装一个包,如下: 然后,把参数输入,输入这个坐标系的参数,如下: 这样就可以输出如下的三…...
如何学习Python编程?
如何学习Python编程? 了解基础概念: 学习Python的基本语法,包括变量、数据类型、运算符等。了解控制结构,如条件语句(if语句)和循环(for和while循环)。 选择学习资源: 在…...
使用EasyExcel实现导出excel文件时生成多级下拉选
前言 公司有个需求本来只涉及到两个下拉选项,后面就想能不能实现多个下拉选,当然我这里说的多个下拉选是联动的,比如省、地市、区县这种。 实现步骤 1、添加EasyExcel的Maven依赖 <dependency><groupId>com.alibaba</group…...
微信小程序 高校教材征订系统
文章目录 项目介绍具体实现截图技术介绍mvc设计模式小程序框架以及目录结构介绍错误处理和异常处理java类核心代码部分展示详细视频演示源码获取 项目介绍 系统分为三个角色,分别是教材科、系教学秘书、教研室主任。系统主要完成功能是教材科要发布教材征订信息&am…...
论文解读:交大港大上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化学习框架(二)
HoST框架核心实现方法详解 - 论文深度解读(第二部分) 《Learning Humanoid Standing-up Control across Diverse Postures》 系列文章: 论文深度解读 + 算法与代码分析(二) 作者机构: 上海AI Lab, 上海交通大学, 香港大学, 浙江大学, 香港中文大学 论文主题: 人形机器人…...
TRS收益互换:跨境资本流动的金融创新工具与系统化解决方案
一、TRS收益互换的本质与业务逻辑 (一)概念解析 TRS(Total Return Swap)收益互换是一种金融衍生工具,指交易双方约定在未来一定期限内,基于特定资产或指数的表现进行现金流交换的协议。其核心特征包括&am…...
高防服务器能够抵御哪些网络攻击呢?
高防服务器作为一种有着高度防御能力的服务器,可以帮助网站应对分布式拒绝服务攻击,有效识别和清理一些恶意的网络流量,为用户提供安全且稳定的网络环境,那么,高防服务器一般都可以抵御哪些网络攻击呢?下面…...
项目部署到Linux上时遇到的错误(Redis,MySQL,无法正确连接,地址占用问题)
Redis无法正确连接 在运行jar包时出现了这样的错误 查询得知问题核心在于Redis连接失败,具体原因是客户端发送了密码认证请求,但Redis服务器未设置密码 1.为Redis设置密码(匹配客户端配置) 步骤: 1).修…...
rnn判断string中第一次出现a的下标
# coding:utf8 import torch import torch.nn as nn import numpy as np import random import json""" 基于pytorch的网络编写 实现一个RNN网络完成多分类任务 判断字符 a 第一次出现在字符串中的位置 """class TorchModel(nn.Module):def __in…...
GitHub 趋势日报 (2025年06月06日)
📊 由 TrendForge 系统生成 | 🌐 https://trendforge.devlive.org/ 🌐 本日报中的项目描述已自动翻译为中文 📈 今日获星趋势图 今日获星趋势图 590 cognee 551 onlook 399 project-based-learning 348 build-your-own-x 320 ne…...
iview框架主题色的应用
1.下载 less要使用3.0.0以下的版本 npm install less2.7.3 npm install less-loader4.0.52./src/config/theme.js文件 module.exports {yellow: {theme-color: #FDCE04},blue: {theme-color: #547CE7} }在sass中使用theme配置的颜色主题,无需引入,直接可…...
手机平板能效生态设计指令EU 2023/1670标准解读
手机平板能效生态设计指令EU 2023/1670标准解读 以下是针对欧盟《手机和平板电脑生态设计法规》(EU) 2023/1670 的核心解读,综合法规核心要求、最新修正及企业合规要点: 一、法规背景与目标 生效与强制时间 发布于2023年8月31日(OJ公报&…...
破解路内监管盲区:免布线低位视频桩重塑停车管理新标准
城市路内停车管理常因行道树遮挡、高位设备盲区等问题,导致车牌识别率低、逃费率高,传统模式在复杂路段束手无策。免布线低位视频桩凭借超低视角部署与智能算法,正成为破局关键。该设备安装于车位侧方0.5-0.7米高度,直接规避树枝遮…...
深度学习之模型压缩三驾马车:模型剪枝、模型量化、知识蒸馏
一、引言 在深度学习中,我们训练出的神经网络往往非常庞大(比如像 ResNet、YOLOv8、Vision Transformer),虽然精度很高,但“太重”了,运行起来很慢,占用内存大,不适合部署到手机、摄…...
