分类 Flutter 下的文章

近来工作中用上了Flutter,并且使用了Provider作为状态管理,确实爽,但是也踩了一下坑。

一 概述

Provider是基于InheritedWidget组件,使用观察者模式 + 生产者消费者模式,实现状态共享,简直就是为了取代StatefulWidget而存在。相关资料:

Provider的Flutter插件网址:
https://pub.dev/packages/provider

Provider的官方中文说明:
https://github.com/rrousselGit/provider/blob/master/resources/translations/zh-CN/README.md

二 总结

  1. Provider可以定义在任意地方,其状态只提供给其子Widget访问。例如,定义在App之上可实现全局的状态共享的状态,定义在页面之上可实现页面内的状态共享。
  2. Provider的子Widget(即child参数)不能传入StatelessWidget对象,或者说不能直接直接传入Widget对象,否则后面的所有孙Widget不能通过context获取其状态。解决方案是使用builder参数,传入构建子Widget的函数,或者child参数设置带有builder函数的Widget,例如Builder对象。
  3. 数据变化,必然导致重绘。所以不要过于担心是否重绘,而重点关注重绘的点在哪里,如何减少重绘的Widget。重绘Widget,会向上找到最近的builder方法并执行。所以需要重绘的Widget,最好放在其builder方法内。需要变化的StatelessWidget对象,用Builder类的builder方法包裹,是个很好的做法。
  4. Provider是以类型区分数据的。如果是多个相同数据类型(例如int类型)的状态,则需要定义不同的类,且都含有该数据类型(例如int类型)的属性。
  5. 定义多个Provider,可以使用MultiProvider。
  6. 组合多个Provider对象,可以使用ProxyProvider。

三 Provider类型

一般使用ChangeNotifierProvider就可以,更多的Provider类型如下:

类型描述
Provider最基础的 provider 组成,接收一个任意值并暴露它。
ListenableProvider供可监听对象使用的特殊 provider。ListenableProvider 会监听对象,并在监听器被调用时更新依赖此对象的 widgets。
ChangeNotifierProvider为 ChangeNotifier 提供的 ListenableProvider 规范,会在需要时自动调用 ChangeNotifier.dispose。
ValueListenableProvider监听 ValueListenable,并且只暴露出 ValueListenable.value。
StreamProvider监听流,并暴露出当前的最新值。
FutureProvider接收一个 Future,并在其进入 complete 状态时更新依赖它的组件。

四 监听方式

获取Provider的状态,有以下三种方式:

  1. read,即只读。只获取状态,不进行监听。示例代码:

    // 使用Provider.of,需要加上参数“listen: false”
    T t = Provider.of(context,listen: false));

    // 使用context.read方法最简单
    T t = context.read();

  2. select,即只监听指定数据。指定数据有变化,才会执行重绘。注意:如果监听对象(包括List对象),只有对象的内存地址变化了,才会执行重绘。对象的属性(包括List对象的元素)变化,不会引起重绘。

    // 使用Selector类,可以定义builder方法
    Selector<T, R>(
    selector: (_, t) {return t.r;},
    builder: (_, r, __) {return Text('${r}');}
    );

    // 使用context.select方法最简单。如果取出的数据需要重绘,则最好用Builder类包裹一下
    R r = context.select<T,R>(R cb(T value));

    // Flutter Provider Selector数据更新问题优化
    // https://blog.csdn.net/Code1994/article/details/124720388

  3. watch,即监听状态的变化。状态有任何变化,都会执行重绘。

    // 使用Consumer类,可以定义builder方法
    Consumer(
    builder: (_, t, __) {return Text('${t.r}');}
    );

    // 使用Provider.of方法。如果取出的数据需要重绘,则最好用Builder类包裹一下
    T t = Provider.of(context);

    // 使用context.watch方法最简单。如果取出的数据需要重绘,则最好用Builder类包裹一下
    T t = context.watch();