Flutter Provider状态管理---八种提供者使用分析

前言

在我们上一篇文章中对Provider进行了介绍以及类结构的说明,最后还写了一个简单的示例,通过上一章节我们对Provider有了一个基本的了解,这一章节我们来说说Provider的8种提供者以及他们的使用区别。

Provider

Provider是最基本的Provider组件,可以使用它为组件树中的任何位置提供值,但是当该值更改的时候,它并不会更新UI,下面我们给出一个示例

第一步:创建模型

第二步:应用程序入口设置

第三步:使用共享数据

关于Consumer后面将消费者在提及,我们这里只需要知道有两个消费者,第一个用于展示模型的数据,第二个用于改变模型的数据。

  • 第一个Comsumer是用于读取模型的数据name
  • 第二个Consumer用于改变模型的数据name

运行结果

我们点击按钮的会导致模型数据改变,但是模型数据改变之后UI并没有变化也没有重建,那是因为Provider提供者组件不会监听它提供的值的变化。

ChangeNotifierProvider

它跟Provider组件不同,ChangeNotifierProvider会监听模型对象的变化,而且当数据改变时,它也会重建Consumer(消费者),下面我们给出一个示例

第一步:创建模型

细心点我们可以发现这里定义的模型有两处变化,如下:

  • 混入了ChangeNotifier
  • 调用了notifyListeners()

因为模型类使用了ChangeNotifier,那么我们就可以访问notifyListeners()并且在调用它的任何时候,ChangeNotifierProvider都会收到通知并且消费者将重建UI。

第二步:应用程序入口设置

第三步:使用共享数据

运行结果

FutureProvider

简单来说,FutureProvider用于提供在组件树中准备好使用其值时可能尚未准备好的值,主要是确保空值不会传递给任何子组件,而且FutureProvider有一个初始值,子组件可以使用该Future值并告诉子组件使用新的值来进行重建。

注意:

  • FutureProvider只会重建一次
  • 默认显示初始值
  • 然后显示Future
  • 最后不会再次重建
第一步:创建模型

这里和Provider不同的是增加了构造函数,以及changeName变成了Future,我们模拟网络请求延迟两秒后改变其值。

第二步:提供Future

我们有一个方法,就是异步获取userModel2,模拟网络请求延迟两秒执行,最后修改了name并返回UserModel2

第三步:应用程序入口设置

initialData是默认值,create参数我们传了一个Future<UserModel2>,因为它接收的模型Create<Future<T>?>

第四步:使用共享数据

运行结果

我们可以看到先展示默认值hello,最后获取到结果的时候展示了获取新的数据,我们尝试改变其值,虽然值改变但是并没有刷新UI。

StreamProvider

StreamProvider提供流值,是围绕StreamBuilder,所提供的值会在传入的时候替换掉新值。和FutureProvider一样,主要的区别在于值会根据多次触发重新构建UI。

如果你对StreamBuilder不太了解的话,那么你就很难理解StreamProviderStreamProvider文档地址

第一步:创建模型

第二步:提供Stream

下面这段代码类似计时器,每隔一秒钟生成一个数字

第三步:应用程序入口设置

这里也有initialData初始值,和FutureProvider类似,只是create属性是获取一个Stream流。

第四步:使用共享数据

运行结果

MultiProvider

在上面的例子中我们都只是返回了一个提供者,在实际开发过程中肯定会有多个提供者,我们虽然可以采用嵌套的方式来解决,但是这样无疑是混乱的,可读性级差。这个时候强大的MultiProvder就产生了,我们来看下示例:

第一步:创建两个模型

第二步:应用程序入口设置

相对于方式一这种嵌套方式设置,方式二就显得尤为简单。

方式一:嵌套设置

方式二:使用MultiProvider

第三步:使用共享数据

运行结果

ProxyProvider

当我们有多个模型的时候,会有模型依赖另一个模型的情况,在这种情况下,我们可以使用ProxyProvider从另一个提供者获取值,然后将其注入到另一个提供者中。我们来看下代码演示

第一步:创建两个模型

下面我们创建了两个模型UserModel5WalletModel,而WalletModel依赖与UserModel5,当调用WalletModelchangeName方法时会改变UserModel5里面的name,当然我们在实际开发的过程中并不是这么简单,这里只是演示模型依赖时如果使用ProxyProvider

第二步:应用程序入口设置

第三步:使用共享数据

运行结果

ChangeNotifierProxyProvider

ProxyProvider原理一样,唯一的区别在于它构建和同步ChangeNotifierChangeNotifierProvider,当提供者数据变化时,将会重构UI。

下面我们给出一个例子:

  • 获取书籍列表
  • 获取收藏书籍列表
  • 点击书籍可加入或者取消收藏
  • 通过代理实时重构UI
第一步:创建两个模型
1、BookModel

BookModel用户存储模型数据,将书籍转换成模型。

2、BookManagerModel

BookManagerModel主要用于管理书籍、收藏书籍、取消收藏等操作

第二步:应用程序入口设置

第三步:设置BottomNavigationBar

第四步:书籍列表UI构建

第五步:收藏列表UI构建

其他辅助封装类

运行结果

ListenableProxyProvider

ListenableProxyProviderListenableProvider的一个变体,但是在使用上和ChangeNotifierProvider效果惊人的一致,如果大家对ListenableProxyProvider有更深的理解,请联系我补充。

总结

Provider为我们提供了非常多的提供者,总共有八种。但我们比较常用的是ChangeNotifierProviderMultiProviderChangeNotifierProxyProvider,关于其他的提供者可根据自己的实际应用场景来。

参考链接


发布者

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注