Flutter 之 InheritedWidget

InheritedWidget 是 Flutter 框架中的一个重要类,用于在 Widget 树中共享数据。它是 Flutter 中数据传递和状态管理的基础之一。通过 InheritedWidget,你可以让子 Widget 在不需要显式传递数据的情况下,访问祖先 Widget 中的数据。这种机制对于跨多个层次的 Widget 共享状态非常有效。

目录

    • 一、 为什么会有 `InheritedWidget`?
    • 二、`InheritedWidget` 的基本工作原理
    • 三、`InheritedWidget` 的解决问题
    • 四、 `InheritedWidget` 的使用例子
    • 五、 `InheritedWidget` 和性能
    • 六、疑问
      • 1、InheritedWidget只能是父组件状态传递到子组件不能子组件传递到父组件吗
        • 1、父组件到子组件的数据传递
        • 2、为什么不支持子组件传递到父组件?
      • 2、子组件的数据如何传递给父组件
        • 1. 回调函数(Callback)
        • 2. 状态提升(Lift State Up)
        • 总结
      • 3、兄弟组件如何共享数据
        • 1. 通过父组件传递数据
        • 示例代码:
        • 2. 使用 `InheritedWidget` 或 `InheritedModel`
        • 使用 `InheritedWidget` 共享数据:
      • 3. 使用 `Provider` 包
    • 七、总结

一、 为什么会有 InheritedWidget

在 Flutter 中,Widget 树是单向的,意味着数据从上层(父 Widget)流向下层(子 Widget)。而 Flutter 中的 Widget 是不可变的,也就是说,你不能直接修改它们的状态。因此,当需要跨多个 Widget 层次传递状态或共享数据时,通常会遇到两类问题:

  • **属性传递:**如果需要共享的数据传递层级过多,父 Widget 必须将数据一层一层地传递给子 Widget,直到最需要这个数据的 Widget。这个过程会导致代码变得冗长,维护困难。
  • 数据共享: 在某些情况下,多个子 Widget 可能需要访问同一个数据源,这种情况下,直接通过构造函数传递数据显得非常不方便,尤其是在较深的 Widget 树中。

InheritedWidget 的出现正是为了解决这两个问题,它让 Widget 树中的任何子 Widget 可以便捷地访问到祖先 Widget 提供的数据,而不必显式地传递给每一个子 Widget。

二、InheritedWidget 的基本工作原理

InheritedWidget 是一个可以在 Widget 树中传播数据的 Widget。它通过实现 updateShouldNotify 方法来通知下层的 Widget,当数据发生变化时,这些 Widget 会重新构建(rebuild),从而获取新的数据。

  • InheritedWidget 发生变化时,它会通过 notifyClients 方法通知所有依赖于它的 Widget。
  • 在 Widget 树中的下层 Widget 可以通过 of 方法获取到祖先 Widget 提供的状态(数据)。

三、InheritedWidget 的解决问题

  • 跨越多层 Widget 树传递数据: 在 Widget 树的上层将数据放入 InheritedWidget 中后,所有的子 Widget 可以访问到该数据,而不需要通过构造函数一层一层地传递。
  • 避免重复构建:InheritedWidget 的数据发生变化时,只有依赖该数据的 Widget 会重新构建。其他不依赖该数据的 Widget 会保持不变,优化了性能。
  • 简化状态管理: InheritedWidget 是许多状态管理解决方案(如 ProviderRiverpod 等)的基础,提供了一个简单且高效的方式来管理和共享状态。

四、 InheritedWidget 的使用例子

import 'package:flutter/material.dart';// 创建一个自定义的 InheritedWidget
class MyInheritedWidget extends InheritedWidget {final int counter;MyInheritedWidget({required Widget child, required this.counter}) : super(child: child);// 判断是否需要通知下层 Widget 更新bool updateShouldNotify(MyInheritedWidget oldWidget) {return counter != oldWidget.counter;}// 提供获取数据的方法static MyInheritedWidget? of(BuildContext context) {return context.dependOnInheritedWidgetOfExactType<MyInheritedWidget>();}
}// 一个使用 InheritedWidget 的子 Widget
class CounterDisplay extends StatelessWidget {Widget build(BuildContext context) {final inheritedWidget = MyInheritedWidget.of(context);return Text('Counter: ${inheritedWidget?.counter ?? 0}');}
}void main() {runApp(MyApp());
}class MyApp extends StatelessWidget {int counter = 0;Widget build(BuildContext context) {return MaterialApp(home: Scaffold(appBar: AppBar(title: Text('InheritedWidget Example')),body: MyInheritedWidget(counter: counter,child: Column(mainAxisAlignment: MainAxisAlignment.center,children: [CounterDisplay(),ElevatedButton(onPressed: () {counter++;// 由于 counter 变化,MyInheritedWidget 会通知子 Widget 更新},child: Text('Increment Counter'),),],),),),);}
}

在上面的代码中:

  • MyInheritedWidget 包含了一个 counter 变量,它可以被下层的子 Widget 访问。
  • CounterDisplay 使用 MyInheritedWidget.of(context) 来获取并显示 counter 的值。
  • 当按钮点击时,counter 值增加并重新构建整个 Widget 树。

五、 InheritedWidget 和性能

虽然 InheritedWidget 可以帮助我们轻松共享数据,但它也有一些限制,尤其是在性能上:

  • 仅依赖 InheritedWidget 的子 Widget 会重新构建,但这个重新构建的范围可能是你未预料到的。因此,要谨慎使用,避免不必要的性能损耗。
  • 对于复杂的应用,可能会更倾向于使用一些更强大的状态管理工具(如 ProviderRiverpod)来简化使用和提升性能。

六、疑问

1、InheritedWidget只能是父组件状态传递到子组件不能子组件传递到父组件吗

是的,InheritedWidget 的设计原则是从父组件向下传递数据,而不是从子组件向父组件传递数据。它主要用于共享 不可变的数据,或者是一些全局状态(如主题、语言、配置等),并使得在 InheritedWidget 树下的子 Widget 可以访问这些数据。

1、父组件到子组件的数据传递

InheritedWidget 允许父组件通过它传递数据到子组件。子组件通过 of 方法获取父组件(或祖先组件)中提供的状态或数据。例如,你可以通过一个 InheritedWidget 在树的上层传递一些数据(如计数器值),然后让树下的任何子组件获取该数据。

2、为什么不支持子组件传递到父组件?

InheritedWidget 是单向数据流的模型,它不支持反向传递(即子组件直接通知父组件更新)。这是因为 InheritedWidget 主要用于 数据共享,而不是 数据修改。其主要目的是提供一种高效的方式来向下共享数据,而不涉及子组件控制父组件的行为。

2、子组件的数据如何传递给父组件

要从子组件传递数据回父组件,通常有两种方式:

1. 回调函数(Callback)

子组件通过调用父组件传入的回调函数将数据或事件传递给父组件。父组件可以在回调函数中处理数据,并更新状态。

import 'package:flutter/material.dart';class ParentWidget extends StatefulWidget {_ParentWidgetState createState() => _ParentWidgetState();
}class _ParentWidgetState extends State<ParentWidget> {int counter = 0;void _incrementCounter() {setState(() {counter++;});}Widget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text('Parent to Child Example')),body: Column(children: [Text('Counter: $counter'),ChildWidget(onPressed: _incrementCounter), // 传递回调函数],),);}
}class ChildWidget extends StatelessWidget {final VoidCallback onPressed;  // 回调函数ChildWidget({required this.onPressed});Widget build(BuildContext context) {return ElevatedButton(onPressed: onPressed,  // 触发父组件传递的回调child: Text('Increment Counter'),);}
}void main() {runApp(MaterialApp(home: ParentWidget()));
}

在这个例子中:

  • ParentWidget 通过 onPressed 回调函数传递给 ChildWidget
  • ChildWidget 点击按钮时会调用 onPressed 回调,通知父组件更新 counter
2. 状态提升(Lift State Up)

如果需要共享和修改状态,可以将状态提升到最近的共同祖先组件,父组件和子组件都可以通过该祖先组件来管理和更新状态。通常,这种方式也与回调函数一起使用。

import 'package:flutter/material.dart';class ParentWidget extends StatefulWidget {_ParentWidgetState createState() => _ParentWidgetState();
}class _ParentWidgetState extends State<ParentWidget> {int counter = 0;void _updateCounter(int value) {setState(() {counter = value;});}Widget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text('State Lifting Example')),body: Column(children: [Text('Counter: $counter'),ChildWidget(onCounterChanged: _updateCounter),  // 状态提升],),);}
}class ChildWidget extends StatelessWidget {final Function(int) onCounterChanged; // 传递回调ChildWidget({required this.onCounterChanged});Widget build(BuildContext context) {return ElevatedButton(onPressed: () {onCounterChanged(5);  // 修改父组件的状态},child: Text('Update Counter to 5'),);}
}void main() {runApp(MaterialApp(home: ParentWidget()));
}
总结
  • InheritedWidget:主要用于将数据从父组件传递到子组件,子组件无法直接修改父组件的状态。
  • 回调函数状态提升:是从子组件向父组件传递数据或修改父组件状态的常用方法。

3、兄弟组件如何共享数据

在 Flutter 中,兄弟组件(即同一个父组件下的不同子组件)之间共享数据通常有几种方式。以下是几种常见的实现方法:

1. 通过父组件传递数据

最简单的方式是通过父组件来协调兄弟组件之间的通信。父组件将共享数据传递给它的子组件,然后子组件通过回调函数将数据发送回父组件,父组件再将数据传递给另一个子组件。这样可以保持数据流的单向性。

示例代码:
import 'package:flutter/material.dart';class ParentWidget extends StatefulWidget {_ParentWidgetState createState() => _ParentWidgetState();
}class _ParentWidgetState extends State<ParentWidget> {int sharedData = 0;// 更新数据并通知所有子组件void updateSharedData(int newValue) {setState(() {sharedData = newValue;});}Widget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text('Shared Data Between Siblings')),body: Column(children: [Text('Shared Data: $sharedData'),// 传递数据到子组件ChildWidget1(onDataChanged: updateSharedData),ChildWidget2(sharedData: sharedData),],),);}
}class ChildWidget1 extends StatelessWidget {final Function(int) onDataChanged;ChildWidget1({required this.onDataChanged});Widget build(BuildContext context) {return ElevatedButton(onPressed: () => onDataChanged(42), // 通过回调通知父组件更新数据child: Text('Update Data to 42'),);}
}class ChildWidget2 extends StatelessWidget {final int sharedData;ChildWidget2({required this.sharedData});Widget build(BuildContext context) {return Text('Child 2 sees Shared Data: $sharedData');}
}void main() {runApp(MaterialApp(home: ParentWidget()));
}

在这个例子中:

  • ParentWidget 维护了 sharedData,并通过 updateSharedData 方法更新它。
  • ChildWidget1 通过回调向父组件发送数据变更请求,父组件接收到数据后更新 sharedData
  • ChildWidget2 获取 sharedData,并显示它。
2. 使用 InheritedWidgetInheritedModel

如果你希望在多个兄弟组件之间共享数据,且不希望通过父组件直接传递数据,可以使用 InheritedWidgetInheritedModel 来共享数据。这两者能够在 Widget 树中向下传递数据,使得同一父级的多个子组件都可以访问这些数据。

使用 InheritedWidget 共享数据:
import 'package:flutter/material.dart';// 创建一个 InheritedWidget
class SharedData extends InheritedWidget {final int data;SharedData({required this.data, required Widget child}) : super(child: child);// 获取数据的静态方法static SharedData? of(BuildContext context) {return context.dependOnInheritedWidgetOfExactType<SharedData>();}bool updateShouldNotify(SharedData oldWidget) {return oldWidget.data != data;}
}class ParentWidget extends StatelessWidget {Widget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text('Shared Data Using InheritedWidget')),body: SharedData(data: 100, // 共享数据child: Column(children: [ChildWidget1(),ChildWidget2(),],),),);}
}class ChildWidget1 extends StatelessWidget {Widget build(BuildContext context) {final sharedData = SharedData.of(context)?.data;return Text('Child 1 sees Shared Data: $sharedData');}
}class ChildWidget2 extends StatelessWidget {Widget build(BuildContext context) {final sharedData = SharedData.of(context)?.data;return Text('Child 2 sees Shared Data: $sharedData');}
}void main() {runApp(MaterialApp(home: ParentWidget()));
}

在这个例子中:

  • SharedData 继承自 InheritedWidget,用于在树下的多个子组件之间共享数据。
  • ChildWidget1ChildWidget2 都可以通过 SharedData.of(context) 获取共享的 data

3. 使用 Provider

如果需要跨多个页面或者复杂的共享数据,可以使用 Flutter 的状态管理框架,如 ProviderProvider 是一种比 InheritedWidget 更加简洁和灵活的解决方案。

七、总结

InheritedWidget 是 Flutter 中处理跨层次数据共享的基础工具。它能有效避免 “prop drilling” 问题,使得子 Widget 可以轻松访问祖先 Widget 的数据。它常常用作状态管理的基础,并且在 Flutter 中的许多第三方库和框架(如 Provider)中都有广泛应用。

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

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

相关文章

Python 深度学习框架介绍

Python 是深度学习领域的主流编程语言&#xff0c;拥有许多强大的深度学习框架&#xff0c;广泛用于学术研究、工业应用和生产环境中。以下是一些最流行的 Python 深度学习框架&#xff0c;它们各自具有独特的功能和特点&#xff1a; 1. TensorFlow 开发公司&#xff1a;Google…

MySQL技巧之跨服务器数据查询:进阶篇-从A服务器的MySQ数据库复制到B服务器的SQL Server数据库的表中

MySQL技巧之跨服务器数据查询&#xff1a;进阶篇-从A服务器的MySQ数据库复制到B服务器的SQL Server数据库的表中 基础篇已经描述&#xff1a;借用微软的SQL Server ODBC 即可实现MySQL跨服务器间的数据查询。 而且还介绍了如何获得一个在MS SQL Server 可以连接指定实例的MyS…

Flutter 指纹识别

在这篇博客中&#xff0c;我们将介绍如何使用 Flutter 的 local_auth 插件在 Android 和 iOS 设备上实现指纹识别功能。通过这一步一步的实现&#xff0c;我们将学习如何检查设备是否支持生物识别、如何触发指纹验证&#xff0c;并处理可能出现的错误。 效果图&#xff08;因为…

CentOS 9 配置静态IP

文章目录 1_问题原因2_nmcli 配置静态IP3_使用配置文件固定IP4_重启后存在的问题5_nmcli 补充 1_问题原因 CentOS 7 于 2014年6月发布&#xff0c;基于 RHEL 7&#xff0c;并在 2024年6月30日 结束维护。 CentOS 9 作为目前的最新版本&#xff0c;今天闲来闲来无事下载下来后…

数据结构(三)——双向链表的介绍以及实现

前言 前面两期数据结构的文章我们介绍了顺序表和单向链表&#xff0c;那么本篇博文我们将来了解双向链表&#xff0c;作为最好用的一种链表&#xff0c;双向链表有什么特殊之处呢&#xff0c;接下来就让我们一起了解一下吧。 下面是前两篇数据结构的文章&#xff1a; 数据结…

Oracle--表空间Tablespace

在 Oracle 数据库中&#xff0c;表空间&#xff08;Tablespace&#xff09; 是一种逻辑存储结构&#xff0c;用于组织和管理数据库中物理存储数据文件的方式。以下是表空间相关操作的详细介绍&#xff0c;包括创建、修改、删除、查询以及常见问题处理。 1. 表空间的作用 提供逻…

cmake一些常用指令

cmake常用的一些命令 推荐网址&#xff1a;CMake 保姆级教程&#xff08;上&#xff09; | 爱编程的大丙 cmake_minimum_required(VERSION 3.0) project(CALC) # 增加-stdc11 set(CMAKE_CXX_STANDARD 11) # 指定输出的路径 set(HOME ${CMAKE_CURRENT_SOURCE_DIR}) # 可执行文…

面阵相机的使用和注意事项

引言 面阵相机&#xff08;Area Scan Camera&#xff09;是一种广泛应用于工业视觉、医学成像、安防监控以及科研领域的图像采集设备。与线扫相机不同&#xff0c;面阵相机的传感器包含多行像素&#xff08;例如1280x1024、1920x1080等&#xff09;&#xff0c;能够在一个曝光…

损失函数分类

1. NLLLoss&#xff08;负对数似然损失&#xff09; 定义&#xff1a; 直接对预测的概率 p(yi) 的负对数求平均。通常配合 Softmax 使用&#xff0c;输入为对数概率。 优点&#xff1a; 对离散分类问题效果良好。更灵活&#xff0c;用户可以自行计算 Softmax。 缺点&#x…

python冒号是什么意思

例如&#xff1a; user: User User.objects.filter(iddata.get(uid)).first() 变量名后面的冒号是&#xff1a;类型注解&#xff0c;3.6以后加入的&#xff0c;冒号右边是类型&#xff0c;仅仅是注释&#xff0c;有些鸡肋。 变量注释的语法&#xff1a;注释变量类型,明确指出…

ESLint v9.0.0 新纪元:探索 eslint.config.js 的奥秘 (4)

从 v9.0.0 开始&#xff0c;官方推荐的配置文件格式是 eslint.config.js&#xff0c;并且支持 ESM 模块化风格&#xff0c;可以通过 export default 来导出配置内容。 // eslint.config.js export default [{rules: {semi: "error","prefer-const": "…

【Vue3】【Naive UI】< a >标签

【Vue3】【Naive UI】< a >标签 超链接及相关属性其他属性 【VUE3】【Naive UI】&#xff1c;NCard&#xff1e; 标签 【VUE3】【Naive UI】&#xff1c;n-button&#xff1e; 标签 【VUE3】【Naive UI】&#xff1c;a&#xff1e; 标签 <a> 标签HTML中的一个锚&…

打字指法和键盘按键功能简介

打字指法和键盘按键功能简介 一、打字指法简介&#xff08;附视频演示&#xff09; 基本要领和练习步骤&#xff1a; 手指位置&#xff1a;正常情况下&#xff0c;大拇指放在空格键上&#xff0c;其余四个手指分别放在 ASDF 和 JKL; 键上。 打字姿势&#xff1a;打字时手指…

H3C ACL实验

实验拓扑 实验需求 按照图示配置 IP 地址全网路由互通在 SERVER1 上配置开启 TELNET 和 FTP 服务配置 ACL 实现如下效果 192.168.1.0/24网段不允许访问 192.168.2.0/24 网段&#xff0c;要求使用基本 ACL 实现 PC1 可以访问 SERVER1 的 TELNET 服务&#xff0c;但不能访问 FTP…

【热门主题】000077 物联网智能项目:开启智能未来的钥匙

前言&#xff1a;哈喽&#xff0c;大家好&#xff0c;今天给大家分享一篇文章&#xff01;并提供具体代码帮助大家深入理解&#xff0c;彻底掌握&#xff01;创作不易&#xff0c;如果能帮助到大家或者给大家一些灵感和启发&#xff0c;欢迎收藏关注哦 &#x1f495; 目录 【热…

网络安全-网络安全审计

网络安全审计是为了确保网络系统的安全性和完整性&#xff0c;防范潜在的网络攻击和数据泄露风险。 审计步骤&#xff1a; 1.确定审计目标&#xff1a;明确审计的目的和范围&#xff0c;例如审计网络设备、服务器、应用程序或数据库等。 2.收集信息&#xff1a;收集审计范围…

AIGC时代 | 如何从零开始学网页设计及3D编程

文章目录 一、网页设计入门1. 基础知识2. 学习平台与资源3. 示例代码&#xff1a;简单的HTMLCSSJavaScript网页 二、3D编程入门1. 基础知识2. 学习平台与资源3. 示例代码&#xff1a;简单的Unity 3D游戏 《编程真好玩&#xff1a;从零开始学网页设计及3D编程》内容简介作者简介…

Java并发07之ThreadLocal

文章目录 1 ThreadLocal原理2 内部结构3 内存泄露问题4 entry的key为什么被设计为弱引用 1 ThreadLocal原理 ThreadLocal类用来提供线程内部的局部变量。这种变量在多线程环境下访问时能保证各个线程的变量相对独立于其他线程内的变量。ThreadLocal实例通常来说都是private st…

Redis设计与实现第17章 -- 集群 总结1(节点 槽指派)

集群通过分片sharding来进行数据共享&#xff0c;并提供复制和故障转移功能。 17.1 节点 一个Redis集群通常由多个节点node组成&#xff0c;刚开始每个节点都是相互独立的&#xff0c;必须将各个独立的节点连接起来&#xff0c;才能构成一个包含多个节点的集群。通过CLUSTER …

HarmonyOS4+NEXT星河版入门与项目实战(25)------UIAbility启动模式(文档编辑案例)

文章目录 1、启动模式2、Specified启动模式实现步骤3、文档编辑案例1、文件创建2代码实现3、Statge 创建4、添加配置1、启动模式 Singleton启动模式: 每个 UIAbility 只存在一个实例,是默认的启动模式,任务列表中只会存在一个相同的 UIAbilityStandard启动模式: 每次启动 U…