Flutter开发上手，InheritedWidget 数据共享

在Flutter开发中，InheritedWidget 也是一个非常重要的组件。它提供了数据在widget树中从上到下传递、共享的方式，对应着数据共享控件 InheritedElement 。在父widget组件中 通过 InheritedWidget 共享了一个数据，那么在 它的任意子组件中都可以 通过 InheritedWidget 获取这个被共享的数据。

先看看 InheritedWidget 组件的源码；

// InheritedWidget间接继承Widget
abstract class InheritedWidget extends ProxyWidget {

  const InheritedWidget({ Key? key, required Widget child })
      : super(key: key, child: child);

  // 使用InheritedElement创建组件
  @override
  InheritedElement createElement() => InheritedElement(this);

  // 父组件数据是否更改，需要实现的方法
  @protected
  bool updateShouldNotify(covariant InheritedWidget oldWidget);
}

源码非常简短，再看下源码上方的使用示例；

import 'package:flutter/material.dart';
// 继承数据共享组件
class FrogColor extends InheritedWidget {
  const FrogColor({
    Key? key,
    required this.color,
    required Widget child,
  }) : super(key: key, child: child);

  final Color color;
  // 定义一个便捷方法，方便子树中的widget获取共享数据，增加一个参数isInherited，是否共享父类的数据
  static FrogColor of(BuildContext context) {
    // 获取共享数据
    final FrogColor? result = context.dependOnInheritedWidgetOfExactType<FrogColor>();
    assert(result != null, 'No FrogColor found in context');
    return result!;
  }

  // 该回调决定当data发生变化时，通知子树中依赖data的Widget
  @override
  bool updateShouldNotify(FrogColor old) => color != old.color;
}

class MyPage extends StatelessWidget {
  const MyPage({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      // 使用 FrogColor
      body: FrogColor(
        color: Colors.red,
        child: Builder(
          builder: (BuildContext innerContext) {
            return Column(
              children: [
                Text('默认颜色'),
                Text('Hello Frog', style: TextStyle(color: Colors.green),),
                Text(
                  'Hello Frog',
                  // 调用FrogColor的of方法获取父组件数据
                  style: TextStyle(color: FrogColor.of(innerContext).color),
                ),
              ],
            );
          },
        ),
      ),
    );
  }
}

通过这个案例，可以发现，共享父组件的数据，必备两个条件：

1. 需要实现 InheritedWidget 组件；
2. 通过调用实现类的 of 方法获取其共享数据。