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

flutter鸿蒙next 使用 InheritedWidget 实现跨 Widget 传递状态

article 2024/11/15 15:56:11

在 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!;
  }

  @override
  bool updateShouldNotify(CounterInheritedWidget oldWidget) {
    // 当 counter 发生变化时，通知子 Widget 进行更新
    return counter != oldWidget.counter;
  }
}

// 2. 创建一个使用 CounterInheritedWidget 的页面
class CounterPage extends StatelessWidget {
  @override
  Widget 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++;
    });
  }

  @override
  Widget 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 重新渲染，显示更新后的计数器值。