0
点赞
收藏
分享

微信扫一扫

Flutter _ 状态管理特别篇 —— Provide

西曲风 2022-04-29 阅读 85

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-KODLf3V0-1651125099575)(https://user-gold-cdn.xitu.io/2019/2/20/1690b552df50d005?imageView2/0/w/1280/h/960/ignore-error/1)]

  • 实际添加请参考:[pub.dartlang.org/packages/pr…](()
  • 由于版本冲突添加失败请参考: [juejin.im/post/684490…](()

第二步:创建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.value(counter));

runApp(
ProviderNode(
child: MyApp(),
providers: providers),
);
}

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

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

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

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

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0OgSI1Cd-1651125099576)(https://user-gold-cdn.xitu.io/2019/2/20/1690b6eb597a11ab?imageView2/0/w/1280/h/960/ignore-error/1)]

第四步:获取状态

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

Provide(
builder: (context, child, counter) {
return Text(
‘${counter.value}’,
style: Theme.of(context).textTheme.display1,
);
},
),

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

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

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

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

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

final currentCounter = Provide.value(context);

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

如何组织多个状态

和scoped_model不同的是,provide模式中你可以轻松组织多个状态。只需要将状态provide进provid 《Android学习笔记总结+最新移动架构视频+大厂安卓面试真题+项目实战源码讲义》无偿开源 徽信搜索公众号【编程进阶路】 er中就可以了。

void main() {
var counter = Counter();
var switcher = Switcher();

var providers = Providers();

providers
…provide(Provider.value(counter))
…provide(Provider.value(switcher));

runApp(
ProviderNode(
child: MyApp(),
providers: providers)
);
}

获取数据流

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

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

StreamBuilder(
initialData: currentCounter,
stream: Provide.stream(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中则是收到了完整的数据。

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

/// Creates a provider that listens to a stream and caches the last
/// received value of the stream.
/// This provider notifies for rebuild after every release.
factory Provider.stream(Stream stream, {T initialValue}) =>
_StreamProvider(stream, initialValue: initialValue);

关于这个做法还有一些争议,具体可以查看这个issue:
[github.com/google/flut…](()

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

根据多个状态重建小部件

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

ogle/flut…](()

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

根据多个状态重建小部件

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

举报

相关推荐

0 条评论