利用 InheritedWidget 来实现 Flutter 状

2023-07-03 本文已影响0人贾震惊

背景

Flutter 常用的状态管理框架 Bloc、 Provider，Bloc 架构中使用了 Provide，而 Provider 是基于 InheritedWidget 组件的。所以本节我们通过自实现 InheritedWidget 来了解 Provider 的原理。

setState

当不依赖状态管理框架时，更新组件状态的方法就是 setState(fn)，调用该方法后，会重新调用 StatefulWidget 的 build 方法重新构建组件，达到刷新界面的效果。

InheritedWidget

简介
InheritedWidget 是 Flutter 中非常重要的一个功能型组件，它提供了一种在 widget 树中从上到下共享数据的方式，比如我们在应用的根 widget 中通过InheritedWidget共享了一个数据，那么我们便可以在任意子widget 中来获取该共享的数据！

class CountInheritedWidget extends InheritedWidget {
   CountInheritedWidget({
    Key? key,
    required this.data,
    required Widget child,
  }) : super(key: key, child: child);

  final CountModel data; // 需要在子树中共享的数据，保存点击次数

 //定义一个便捷方法，方便子树中的widget获取共享数据
  static CountInheritedWidget? of(BuildContext context) {
    return context.dependOnInheritedWidgetOfExactType<CountInheritedWidget>();
  }

  //该回调决定当data发生变化时，是否通知子树中依赖data的Widget重新build
  @override
  bool updateShouldNotify(CountInheritedWidget old) {
    return old.data != data;
  }
}

class ChildText extends StatefulWidget {
  @override
  State<ChildText> createState() => _ChildTextState();
}

class _ChildTextState extends State<ChildText> {
  @override
  Widget build(BuildContext context) {
    return Text(
      CountInheritedWidget.of(context)?.data.count.toString() ?? '',
    );
  }

  @override 
  void didChangeDependencies() {
    super.didChangeDependencies();
    //父或祖先widget中的InheritedWidget改变(updateShouldNotify返回true)时会被调用。
    //如果build中没有依赖InheritedWidget，则此回调不会被调用。
    print("ChildText Dependencies change");
  }
}

didChangeDependencies
State对象有一个 didChangeDependencies 回调，它会在“依赖”发生变化时被 Flutter 框架调用。而这个“依赖”指的就是子 widget 是否使用了父 widget 中 InheritedWidget 的数据！如果使用了，则代表子 widget 有依赖；如果没有使用则代表没有依赖。这种机制可以使子组件在所依赖的InheritedWidget 变化时来更新自身！

建立依赖：dependOnInheritedWidgetOfExactType()->dependOnInheritedElement()->
InheritedElement.updateDependencies()->_dependents[dependent] = value;(往依赖表里添加依赖的子组件)
通知依赖更新：
InheritedElement.update->ProxyElement.notifyClients->InheritedElement.notifyClients(遍历_dependents更新依赖)-InheritedElement.notifyDependent>dependent.didChangeDependencies();

通知数据发生变化
为了更贴近 Flutter 开发，我们使用Flutter SDK中提供的ChangeNotifier 类，它实现了一个 Flutter 风格的发布者-订阅者模式。我们将要共享的状态放到一个 Model 类中，然后让它继承自 ChangeNotifier，这样当共享的状态改变时，我们只需要调用 notifyListeners() 来通知订阅者，然后由订阅者来重新构建 InheritedWidget，而依赖该InheritedWidget 的子孙 Widget 就会更新。

class CountModel extends ChangeNotifier {
  int count = 0;
  void add() {
    count++;
    notifyListeners();
  }
}

class _ChangeCountProviderState extends State<ChangeCountProvider> {
  void update() {
    setState(() {});
  }

  @override
  void initState() {
    // 给data添加监听器
    widget.data.addListener(update);
    super.initState();
  }

  @override
  void dispose() {
    // 移除data的监听器
    widget.data.removeListener(update);
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return CountInheritedWidget(
      data: widget.data,
      child: widget.child,
    );
  }
}

优化
如果我们只想在子组件中引用 CountInheritedWidget 中共享的数据，但却不希望在 CountInheritedWidget 发生变化时调用子组件的 didChangeDependencies 方法重新构建子组件怎么办？因为子组件和 CountInheritedWidget 建立了依赖关系，当 CountInheritedWidget 更新时，依赖它的子组件也会更新，所以只要我们解除这种依赖关系就可以了。通过 getElementForInheritedWidgetOfExactType 方法即可。dependOnInheritedWidgetOfExactType 和 getElementForInheritedWidgetOfExactType 的区别就是前者会注册依赖关系，而后者不会。

  //添加一个listen参数，表示是否建立依赖关系
   static CountModel? of(BuildContext context, {bool listen = true}) {
  final provider = listen
       ? context.dependOnInheritedWidgetOfExactType<CountInheritedWidget>()
       : context.getElementForInheritedWidgetOfExactType<CountInheritedWidget>()?.widget as CountInheritedWidget;
     return provider?.data;
  }

至此我们计数器版的状态管理器就实现了，它具备 Provider Package 中的核心功能，但是这个 demo 的功能并不全面，实现这个迷你 Provider 的主要目的是为了帮助大家了解 Provider Package 底层的原理，所以在实战中还是使用 Provider Package。

Provider

class _ProviderCountViewState extends State<ProviderCountView> {
  @override
  Widget build(BuildContext context) {
    return ChangeNotifierProvider(
      create: (ctx) => _CountChangeNotifier(),
      child: Scaffold(
        appBar: AppBar(
          backgroundColor: Theme.of(context).colorScheme.inversePrimary,
          title: const Text('Provider'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Consumer<_CountChangeNotifier>(builder: (ctx, value, child) {
                return Text(
                  "${value.count}",
                  style: const TextStyle(
                      fontWeight: FontWeight.w500, fontSize: 20),
                );
              }),
              ChildHint(),
              Padding(
                padding: const EdgeInsets.only(top: 50),
                child: Builder(builder: (ctx) {
                  return FloatingActionButton(
                    onPressed: () {
                      var model = ctx.read<_CountChangeNotifier>();
                      model.add();
                    },
                    child: const Icon(Icons.add),
                  );
                }),
              )
            ],
          ),
        ),
      ),
    );
  }
}

class _CountChangeNotifier extends ChangeNotifier {
  int count = 0;

  void add() {
    count++;
    notifyListeners();
  }
}

利用 InheritedWidget 来实现 Flutter 状

背景

setState

InheritedWidget

Provider

猜你喜欢

热点阅读