flutter InheritedWidget

Flutter InheritedWidget

非常重要的基类组件,能有效的沿树传播信息

---

当以这种方式引用继承的窗口小部件时，当继承的窗口小部件本身更改状态时，将导致使用者重建

---

前言

flutter 基础学习

---

此文章将深入研究InheritedWidget 后续持续更新文章

一、InheritedWidget是什么？

小部件的基类,这些小部件能沿树传播信息
比较有名的框架provider 就是通过InheritedWidget实现状态监听的

二、使用步骤

1.直接继承

直接继承后使用即可

代码如下（官方示例）：

class FrogColor extends InheritedWidget {
  const FrogColor({
    Key? key,
    required this.color,
    required Widget child,
  }) : super(key: key, child: child);

  final Color color;

  static FrogColor of(BuildContext context) {
    final FrogColor? result = context.dependOnInheritedWidgetOfExactType<FrogColor>();
    assert(result != null, 'No FrogColor found in context');
    return result!;
  }

  @override
  bool updateShouldNotify(FrogColor old) => color != old.color;
}

主要看of 方法
约定是of在InheritedWidget上提供一个静态方法，该方法对BuildContext.dependOnInheritedWidgetOfExactType 进行调用。如果范围内没有小部件，这允许类定义自己的后备逻辑。在上面的示例中，在这种情况下，返回的值将为null，但也可能默认为一个值。

有时，该of方法返回数据而不是继承的窗口小部件。例如，在这种情况下，它可能返回了Color而不是FrogColor小部件。

有时，继承的小部件是另一个类的实现细节，因此是私有的。of在那种情况下，该方法通常放在公共类上。例如，主题被实现为 StatelessWidget，它构建了一个私有继承的窗口小部件；Theme.of使用BuildContext.dependOnInheritedWidgetOfExactType查找继承的窗口小部件 ，然后返回ThemeData。
调用of方法注意：
使用该of方法时，context必须为InheritedWidget的后代

2.监听数据

代码如下（示例）：

class MyPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: FrogColor(
        color: Colors.green,
        child: Builder(
          builder: (BuildContext innerContext) {
            return Text(
              'Hello Frog',
              style: TextStyle(color: FrogColor.of(innerContext).color),
            );
          },
        ),
      ),
    );
  }
}

如果context使用的不是FrogColor小部件的父级，因此不会起作用
看错误的代码样式,context使用的不是FrogColor小部件的父级，因此他不会起到任何作用

class MyOtherPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: FrogColor(
        color: Colors.green,
        child: Text(
          'Hello Frog',
          style: TextStyle(color: FrogColor.of(context).color),
        ),
      ),
    );
  }
}

总结

InheritedWidget使用直接继承即可，context必须是InheritedWidget后代,这点需要特别注意,后续将持续更新