flutter用户权限管理(Flutter状态管理特别篇)

https://github.com/google/flutter-provide前言

今天偶然发现在谷歌爸爸的仓库下出现了一个叫做flutter-provide的状态管理框架,2月8日才第一次提交,非常新鲜。在简单上手之后感觉就是一个字——爽!所以今天就跟大家分享一下这个新的状态管理框架。

Provider被设计为ScopedModel的替代品,并且允许我们更加灵活地处理数据类型和数据。但是首先呢还是先说说老生常谈的状态管理。

为什么需要状态管理

在我们一开始构建应用的时候,也许很简单。我们有一些状态,直接把他们映射成视图就可以了。这种简单应用可能并不需要状态管理。

flutter用户权限管理(Flutter状态管理特别篇)(1)

但是随着功能的增加,你的应用程序将会有几十个甚至上百个状态。这个时候你的应用应该会是这样。

flutter用户权限管理(Flutter状态管理特别篇)(2)

Wow,这是什么鬼。我们很难再清楚的测试维护我们的状态,因为它看上去实在是太复杂了!而且还会有多个页面共享同一个状态,例如当你进入一个文章点赞,退出到外部缩略展示的时候,外部也需要显示点赞数,这时候就需要同步这两个状态。

这时候,我们便迫切的需要一个架构来帮助我们理清这些关系,状态管理框架应运而生。

什么是Provide

和Scoped_model一样,Provide也是借助了InheritWidget,将共享状态放到顶层MaterialApp之上。底层部件通过Provier获取该状态,并通过混合ChangeNotifier通知依赖于该状态的组件刷新。

Provide还提供了Provide.stream,让我们能够以处理流的方式处理数据,不过目前还有一些问题,不推荐使用。

Lets do it!

我们这里还是以一个简单app为例,详细介绍Provide的用法。其中涉及共享状态以及多个状态之间如何管理。

flutter用户权限管理(Flutter状态管理特别篇)(3)

这两个页面都同时依赖于counter 和 switcher两个不同的状态。并且一个页面改变状态之后另外一个页面状态也随之改变。

该项目完整代码已放在 Github

第一步:添加依赖

在pubspec.yaml中添加Provide的依赖。

flutter用户权限管理(Flutter状态管理特别篇)(4)

  • 实际添加请参考:https://pub.dartlang.org/packages/provide#-installing-tab-
  • 由于版本冲突添加失败请参考: https://juejin.im/post/5b8958d351882542b03e6d57

第二步:创建Model

这里实际上它承担了State的职责,但是为了和官方的State区分所以叫做model。

import 'package:flutter/material.dart'; class Counter with ChangeNotifier{ int value = 0; increment(){ value ; notifyListeners(); } }

这里我们可以看到,数据和操作数据的方法都在model中,我们可以很清晰的把业务分离出来。

对比Scoped_model可以发现,Provide模式中model不再需要继承Model类,只需要实现Listenable,我们这里混入ChangeNotifier,可以不用管理听众。

通过 notifyListeners 我们可以通知听众刷新。

第三步:将状态放入顶层

void main() {

var counter = Counter();

var providers = Providers();

//将counter对象添加进providers

providers.provide(Provider<Counter>.value(counter));

runApp(

ProviderNode(

child: MyApp(),

providers: providers),

);

}

ProviderNode封装了InheritWidget,并且提供了 一个providers容器用于放置状态。

providers内部通过 Map<Type, Provider<dynamic>>来储存provider,在存放的时候你可以通过传入ProviderScope("name")来指定key。

Provider<Counter>.value将counter包装成了_ValueProvider。并在它的内部提供了StreamController从而实现对数据进行流式操作。

flutter用户权限管理(Flutter状态管理特别篇)(5)

第四步:获取状态

同样的Provide也提供了两种获取State的方法。我们先来介绍第一种,通过Provide<T>小部件获取。

Provide<Counter>( builder: (context, child, counter) { return Text( '${counter.value}', style: Theme.of(context).textTheme.display1, ); }, ),

每次通知数据刷新时,builder将会重新构建这个小部件。

builder方法接收三个参数,这里主要介绍第二个和第三个。

  • 第二个参数child:假如这个小部件足够复杂,内部有一些小部件是不会改变的,那么我们可以将这部分小部件写在Provide的child属性中,让builder不再重复创建这些小部件,以提升性能。
  • 第三个参数counter:这个参数代表了我们获取的顶层providers中的状态<T>。

scope:通过指定ProviderScope获取该键所对应的状态。在需要使用多个相同类型状态的时候使用。

第二种获取方式:Provide.value<T>(context)

final currentCounter = Provide.value<Counter>(context);

这种方式实际上调用了context.inheritFromWidgetOfExactType找到顶层的_InheritedProviders来获取到顶层providers中的状态。

如何组织多个状态

和scoped_model不同的是,provide模式中你可以轻松组织多个状态。只需要将状态provide进provider中就可以了。

void main() { var counter = Counter(); var switcher = Switcher(); var providers = Providers(); providers ..provide(Provider<Counter>.value(counter)) ..provide(Provider<Switcher>.value(switcher)); runApp( ProviderNode( child: MyApp(), providers: providers) ); }

获取数据流

在将counter添加进providers的过程中进行了一次包装。我们刚才通过分析源码知道了这个操作能够让我们处理流式数据。

通过 Provide.stream<T>(context) 就能获取数据流。

StreamBuilder<Counter>( initialData: currentCounter, stream: Provide.stream<Counter>(context) .where((counter) => counter.value % 2 == 0), builder: (context, snapshot) => Text('Last even value: ${snapshot.data.value}')),

不过在我的使用当中出现了streamTransformer失效的情况。在firstScreen和secondScreen同样应用这一段相同的代码,second screen的where方法能够生效,过滤掉奇数数据,而first screen中则是收到了完整的数据。 具体还未找到原因,不过可以肯定的是,这个流是一个广播流。如果是我理解有问题还请大神指出,感谢。

Provide这个功能还可以结合rxdart使用,让我们更加灵活的组织数据,用起来非常爽。

根据多个状态重建小部件

当我们一个视图可能依赖于多个状态进行重建的时候,可以使用ProvideMulti小部件。

写在最后

自从上次写完状态管理拓展篇Rxdart之后断更了三个月。总结篇迟迟没有出来,在这里先说一声抱歉。对于我来讲状态管理这个本身就是一个新鲜玩意,所以在没有经过大型应用实战检验的总结都是空谈。 这也是为什么我迟迟没有开始写总结篇的原因。不过在这我可以说一些自己的感受,供大家参考。

在这几个月中,我用的比较多的是BLoC,它组织数据确实非常灵活,可以很轻松的实现懒加载之类的操作。而且stateful widget写的是越来越少了。缺点就是入门的门槛比较高,理解StreamTransformer和为什么需要pipe花了我不少时间。使用bloc思维方式需要比较大的改变,我看到了许多人在项目中使用bloc,但是用得很奇怪,还在以之前的思维模式思考。而且bloc只是对数据进行组织,共享状态平时还是使用的InheritWidget,确实要做很多额外的功夫。

其次我比较喜欢的就是scoped_model,理由就是简单好用。学习成本很低,而且没有写什么模版代码。

我最不想使用的状态管理方式就是redux了,一个是入门难度比较高,而且对于异步数据处理我也觉得是相当麻烦的。但是闲鱼团队倒是喜欢redux,之后还会开源闲鱼的状态管理框架fish_redux。所以说,可能还是我编写的应用还不够复杂,才会有这种感受。redux在复杂应用上能够更加清楚的划分职责,并且单向数据流以及state是immutable的特点这些都是redux的好处。

最后我再谈谈Provide。Provide整体上给我的体验非常接近Scoped,简单易上手,并且更加强大。model不用再继承,只用实现Listenable让它不再具有侵入性。于此同时又增加了stream的特性,和bloc的做法又有几分相似。如果你使用过Scoped_model你会很快就上手。

不过可以说的是,Provide是一个非常优秀的状态管理方式,值得你去使用。

下面是demo

https://github.com/google/flutter-provide

,

免责声明:本文仅代表文章作者的个人观点,与本站无关。其原创性、真实性以及文中陈述文字和内容未经本站证实,对本文以及其中全部或者部分内容文字的真实性、完整性和原创性本站不作任何保证或承诺,请读者仅作参考,并自行核实相关内容。文章投诉邮箱:anhduc.ph@yahoo.com

    分享
    投诉
    首页