Flutter中的InheritedWidget是什么？它的作用是什么？

InheritedWidget 是什么？

InheritedWidget 是 Flutter 中用于在 widget 树上传递共享数据的一种特殊 widget。它允许在 widget 树中较低层级的 widget 访问上层 widget 提供的数据，而无需通过构造函数一层层传递。InheritedWidget 是 Flutter 中实现状态共享和全局状态管理的重要方式之一。

作用

InheritedWidget 的主要作用是在 widget 树中提供数据，使子 widget 可以方便地访问这些数据，并在数据变化时自动响应更新。它主要用于实现以下需求：

跨层级数据共享：在 widget 树中的任意层级提供共享的数据，使得子 widget 可以方便地获取这些数据。
响应数据变化：当数据发生变化时，依赖该数据的子 widget 会自动重建，从而反映最新的状态。

使用场景

适用于那些需要跨多个 widget 层级共享的状态和配置数据，如主题、语言配置、用户登录状态等。Flutter 中的 Theme、MediaQuery、Navigator 等常用 widget 都是通过 InheritedWidget 传递共享数据的。

工作原理

当 InheritedWidget 中的数据改变时，调用 build() 方法的子 widget 会被重新构建。InheritedWidget 利用 updateShouldNotify 来控制何时通知子 widget 数据发生变化。在 widget 树中，子 widget 可以通过 of 方法访问 InheritedWidget 中的数据。

基本实现步骤

下面是一个简单的示例，展示如何使用 InheritedWidget 实现数据共享：

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

// 自定义的 InheritedWidget
class MyDataInheritedWidget extends InheritedWidget {
  final String data;

  MyDataInheritedWidget({Key key, Widget child, this.data})
      : super(key: key, child: child);

  // 静态方法，方便子 widget 访问数据
  static MyDataInheritedWidget of(BuildContext context) {
    return context.dependOnInheritedWidgetOfExactType<MyDataInheritedWidget>();
  }

  @override
  bool updateShouldNotify(MyDataInheritedWidget oldWidget) {
    // 判断数据是否发生变化
    return oldWidget.data != data;
  }
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyDataInheritedWidget(
        data: 'Hello, Flutter!',
        child: Scaffold(
          appBar: AppBar(title: Text('InheritedWidget Demo')),
          body: Center(
            child: MyWidget(),
          ),
        ),
      ),
    );
  }
}

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // 通过 of 方法获取 MyDataInheritedWidget 中的数据
    final String data = MyDataInheritedWidget.of(context).data;
    return Text(data);
  }
}

总结

InheritedWidget 提供一种高效的方式在 widget 树中共享状态。通过实现 InheritedWidget，可以让子 widget 自动更新以响应上层 widget 数据的变化，而不需要显式地通知。这对于实现跨层级数据共享和状态管理非常有用。

更多关于Flutter中的InheritedWidget是什么？它的作用是什么？的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

vueper 1楼•4 天前

更多关于Flutter中的InheritedWidget是什么？它的作用是什么？的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

在Flutter中，InheritedWidget 是一个非常重要的基类，用于实现数据的跨层级传递。它允许你在 Flutter 的 Widget 树中从上至下地共享数据，而无需通过构造函数逐级传递（也称为“prop drilling”）。下面是对 InheritedWidget 的详细解释及其作用的代码示例。

1. `InheritedWidget` 是什么？

InheritedWidget 是 Flutter 框架中的一个抽象类，定义在 flutter/lib/src/widgets/inherited_widget.dart 文件中。它继承自 Widget，并且有两个关键属性：

data：这是你想要在 Widget 树中共享的数据。
updateShouldNotify：这是一个函数，用于决定当 data 发生变化时，是否需要通知依赖该数据的 Widgets。

2. `InheritedWidget` 的作用

InheritedWidget 的主要作用是提供一种机制，通过该机制，可以在 Flutter 的 Widget 树中高效地共享数据。它使得数据的传递不再局限于直接父子关系，而是可以跨越多个层级，这大大简化了状态管理和数据传递的逻辑。

3. 代码示例

下面是一个简单的示例，展示了如何使用 InheritedWidget 来实现数据共享。

定义一个 `InheritedWidget` 子类

首先，我们定义一个 MyInheritedWidget，它继承自 InheritedWidget 并携带一些数据。

import 'package:flutter/material.dart';

class MyData {
  final String value;

  MyData(this.value);
}

class MyInheritedWidget extends InheritedWidget {
  final MyData data;

  MyInheritedWidget({
    Key key,
    Widget child,
    @required this.data,
  }) : super(key: key, child: child);

  // 获取最近的 MyInheritedWidget 实例
  static MyInheritedWidget of(BuildContext context) {
    final MyInheritedWidget? result =
        context.dependOnInheritedWidgetOfExactType<MyInheritedWidget>();
    assert(result != null, 'No MyInheritedWidget found in context');
    return result!;
  }

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

使用 `MyInheritedWidget` 共享数据

接下来，我们在应用中使用 MyInheritedWidget 来共享数据，并在子 Widget 中访问这些数据。

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyInheritedWidget(
        data: MyData('Hello, World!'),
        child: Scaffold(
          appBar: AppBar(title: Text('InheritedWidget Demo')),
          body: Center(
            child: MyChildWidget(),
          ),
        ),
      ),
    );
  }
}

class MyChildWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final MyData myData = MyInheritedWidget.of(context).data;
    return Text(myData.value);
  }
}

在这个示例中，我们定义了一个 MyData 类来存储要共享的数据，然后创建了一个 MyInheritedWidget 类来携带这些数据。在 MyApp 中，我们将 MyInheritedWidget 包裹在 MaterialApp 的 home 属性中，并传递了一个 MyData 实例。最后，在 MyChildWidget 中，我们通过 MyInheritedWidget.of(context).data 来访问这些数据，并在屏幕上显示。

总结

InheritedWidget 是 Flutter 中实现数据跨层级传递的强大工具。通过定义继承自 InheritedWidget 的子类，你可以轻松地在 Widget 树中共享数据，而无需逐级传递。这种方式不仅简化了代码结构，还提高了数据传递的效率。

Flutter中的InheritedWidget是什么？它的作用是什么？