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

Flutter 之 InheritedWidget

article 2024/12/3 6:14:39

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 是许多状态管理解决方案（如 Provider、Riverpod 等）的基础，提供了一个简单且高效的方式来管理和共享状态。

四、 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 更新
  @override
  bool updateShouldNotify(MyInheritedWidget oldWidget) {
    return counter != oldWidget.counter;
  }

  // 提供获取数据的方法
  static MyInheritedWidget? of(BuildContext context) {
    return context.dependOnInheritedWidgetOfExactType<MyInheritedWidget>();
  }
}

// 一个使用 InheritedWidget 的子 Widget
class CounterDisplay extends StatelessWidget {
  @override
  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;

  @override
  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 会重新构建，但这个重新构建的范围可能是你未预料到的。因此，要谨慎使用，避免不必要的性能损耗。
  • 对于复杂的应用，可能会更倾向于使用一些更强大的状态管理工具（如 Provider、Riverpod）来简化使用和提升性能。

六、疑问

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

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

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

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

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

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

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

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

1. 回调函数（Callback）

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

import 'package:flutter/material.dart';

class ParentWidget extends StatefulWidget {
  @override
  _ParentWidgetState createState() => _ParentWidgetState();
}

class _ParentWidgetState extends State<ParentWidget> {
  int counter = 0;

  void _incrementCounter() {
    setState(() {
      counter++;
    });
  }

  @override
  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});

  @override
  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 {
  @override
  _ParentWidgetState createState() => _ParentWidgetState();
}

class _ParentWidgetState extends State<ParentWidget> {
  int counter = 0;

  void _updateCounter(int value) {
    setState(() {
      counter = value;
    });
  }

  @override
  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});

  @override
  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 {
  @override
  _ParentWidgetState createState() => _ParentWidgetState();
}

class _ParentWidgetState extends State<ParentWidget> {
  int sharedData = 0;

  // 更新数据并通知所有子组件
  void updateSharedData(int newValue) {
    setState(() {
      sharedData = newValue;
    });
  }

  @override
  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});

  @override
  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});

  @override
  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. 使用 InheritedWidget 或 InheritedModel

如果你希望在多个兄弟组件之间共享数据，且不希望通过父组件直接传递数据，可以使用 InheritedWidget 或 InheritedModel 来共享数据。这两者能够在 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>();
  }

  @override
  bool updateShouldNotify(SharedData oldWidget) {
    return oldWidget.data != data;
  }
}

class ParentWidget extends StatelessWidget {
  @override
  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 {
  @override
  Widget build(BuildContext context) {
    final sharedData = SharedData.of(context)?.data;
    return Text('Child 1 sees Shared Data: $sharedData');
  }
}

class ChildWidget2 extends StatelessWidget {
  @override
  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，用于在树下的多个子组件之间共享数据。
  • ChildWidget1 和 ChildWidget2 都可以通过 SharedData.of(context) 获取共享的 data。

3. 使用 Provider 包

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

七、总结

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


http://www.kler.cn/a/419491.html

相关文章：

  • 【docker】docker网络六种网络模式
  • Spark 内存管理机制
  • vue基础之6：计算属性、姓名案例、简写计算属性
  • Vue3 脚手架扩展
  • 机器学习任务功略
  • Python 爬虫 （1）基础 | Request与Response
  • 【大模型】ChatGPT 提示词优化进阶操作实战详解
  • 新能源，半导体，医药生物等高科技企业如何高效、安全、智能管理文件数据
  • 汽车IVI中控开发入门及进阶（三十五）：架构QML App Architecture Best Practices
  • Docker Buildx 与 CNB 多平台构建实践
  • 无人机地面遥控遥测技术与算法概述！
  • 文库 | 从嬴图的技术文档聊起
  • 网络性能四大关键指标：带宽、时延、抖动和丢包率
  • vue项目中单独文件的js不存在this.$store?.state怎么办
  • 在RockyLinux9.4上安装Microk8s
  • Neo4j启动时指定JDK版本
  • Linux-异步IO和存储映射IO
  • C++《set与map》
  • websocket企业开发中常见问题及解决方案
  • 汽车软件单元测试的重要性
  • 基于Java Springboot房屋租赁App且微信小程序
  • 【LLM】Langchain+RAG大模型学习笔记
  • 什么是事件日志管理系统？事件日志管理系统有哪些用处？
  • Ollama离线迁移模型，不联网从一台电脑复制到另一台电脑
  • Vulnhub靶场 Matrix-Breakout: 2 Morpheus 练习
  • Ubuntu Linux操作系统