Flutter 之 InheritedWidget

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

一、为什么会有 `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）中都有广泛应用。