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 等更高级的状态管理工具，可以在更复杂的应用中提供更加灵活和简洁的状态管理方案。