Flutter最大难点---状态管理,解决了,就可以大胆撸Flutter App了

为什么需要状态管理?

刚开始构建应用的时候,只有少许状态需要管理,这时候可能并不需要状态管理。

但随着功能增加,会出现成百上千的状态,如果没有状态管理,就会乱成一锅粥。

Provide是借助inheritWidget ,把共享状态放到顶层materialApp之上,底层部件通过provider获取该状态,并通过混合ChangeNotifier通知依赖于该状态的组件刷新。Provide还提供了Provide.stream,让我们能够以处理流的方式处理数据。

开始吧!

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

该项目完整代码已放在 Github

第一步:添加依赖

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

provide : ^1.0.1  #这里版本查看官方

实际添加请参考:pub.dartlang.org/packages/pr…

由于版本冲突添加失败请参考: juejin.im/post/5b8958… 

import 'package:provide/provide.dart';

第二步,创建Model

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

这里以简单的Counter为例:

对比Scoped_m这里我们可以看到,数据和操作数据的方法都在model中,我们可以很清晰的把业务分离出来。这里我们可以发现,Provide模式中model不再需要继承Model类,只需要实现Listenable,我们这里混入ChangeNotifier,可以不用管理听众。

第三步:将状态放入顶层   这里虽然定义在全局,但事实上也可以定义在页面级

ProviderNode表示的是提供者

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

ProviderScope 为Provider提供单独的类型空间,它允许多个相同类型的提供者。默认使用ProviderScope('_default'),存放的时候你可以通过ProviderScope("name")来指定key。

添加一组Provider的时候建议使用provideFrom或者provide方法,而不是provideAll,因为它可以检查编译时的类型错误。 

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

第四步,获取状态

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

每次通知数据刷新时,builder将会重新构建这个小部件。builder方法接收三个参数,这里主要介绍第二个和第三个。第二个参数child:假如这个小部件足够复杂,内部有一些小部件是不会改变的,那么我们可以将这部分小部件写在Provide的child属性中,让builder不再重复创建这些小部件,以提升性能。第三个参数counter:这个参数代表了我们获取的顶层providers中的状态。scope:通过指定ProviderScope获取该键所对应的状态。在需要使用多个相同类型状态的时候使用。

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

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

添加一个方法,用于获取Counter实例:

Provide会在Counter发生变化的时候,触发builder回调来更新界面

发通知

第五步:如何组织多个状态

provide模式中你可以轻松组织多个状态。只需要将状态provide放进provider中就可以了。

第六步,获取数据流

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

通过 Provide.stream<T>(context) 就能获取数据流。需要注意的是,这里每次获取的数据流都如下:

不过在我的使用当中出现了streamTransformer失效的情况。在firstScreen和secondScreen同样应用这一段相同的代码,second screen的where方法能够生效,过滤掉奇数数据,而first screen中则是收到了完整的数据。

需要注意的是,这里每次获取的数据流都会重新创建一条新的流。

关于这个做法还有一些争议,具体可以查看这个issue:

github.com/google/flut…

不过这个功能还可以结合rxdart使用,可以通过stream轻松构建Observer,让我们更加灵活的组织数据。

第七步,根据多个状态重建小部件

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

第八步,可能出现的问题

由于 Provide 自动将 Listenable 数据包装并提供了 Provide.stream 接口,让我们可以通过监听这个流,来获取最新事件。但是当我们进行手动监听之后将会发生这件诡异的事情。


按理说这里应该在数据发生变化的时候收到一条事件,可是我们这里发现一次性输出了 5 条flutter: Instance of 'Switcher'

为什么是 5 条呢,这是因为我一共在 5 处 地方收听过这个数据,包括使用 Provide Widget 也算一次收听。

而当我退出第二个页面之后再次进入,发现这次收到的数据比上次多了 5 条。

出现这个现象是由于这个 stream 是由工厂方法创建,每次调用 Provide.stream 都会重新创建出来一条流。就算收听者不再收听,这条流也会存在。

所以不要去手动监听你的 Provide.stream。

Stream模式

stream是使用Provide.stream<Counter>(context)获取的

在provide中有一个概念叫scope,类的完整类名叫ProviderScope

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 159,117评论 4 362
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,328评论 1 293
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 108,839评论 0 243
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 44,007评论 0 206
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,384评论 3 287
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,629评论 1 219
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,880评论 2 313
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,593评论 0 198
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,313评论 1 243
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,575评论 2 246
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,066评论 1 260
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,392评论 2 253
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,052评论 3 236
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,082评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,844评论 0 195
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,662评论 2 274
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,575评论 2 270

推荐阅读更多精彩内容

  • 该文已授权公众号 「码个蛋」,转载请指明出处讲了那么多的部件,这节我打算来点不太一样的,可能会没有部件那么好理解,...
    Kuky_xs阅读 4,834评论 7 25
  • 前言 今天偶然发现在谷歌爸爸的仓库下出现了一个叫做flutter-provide的状态管理框架,2月8日才第一次提...
    Vadaski阅读 19,662评论 12 39
  • 如何吸引你的读者 一个好故事的第一标准是什么? 优美的文笔,哲理的话语,美丽的风景描写,人物内心的精妙独白,还是?...
    罗小宸阅读 595评论 3 6
  • 今晚洗完澡出来用旧手机听歌的时候无意间点到微信看到之前聊天时你给我发的语音,我特别欣喜地点开,以为你复我了...
    ClaireZ阅读 201评论 0 0
  • 已有两天没有更文了,上次聊的是女人每日必须要做皮肤护理,皮肤护理最重要的是基底护理,基底护理相当是盖一栋楼要打好地...
    5b2369f0dc1b阅读 562评论 0 1