Flutter使用RepositoryProvider解决跨组件传值问题
目录
- 前言
- RepositoryProvider定义
- RepositoryProvider 应用
- 总结
前言 在实际开发过程中,经常会遇到父子组件传值的情况,通常来说会有三种方式:
- 构造函数传值:父组件将子组件需要的对象通过构造函数传递给子组件;
- 单例对象:构建单例对象,使得父子组件使用的是同一个对象;
- 容器:将对象存入容器中,父子组件使用的时候直接从容器中获取。
RepositoryProvider
,可以为组件树的子组件提供共享对象,这个共享对象只限在组件树中使用,可以通过 Provider
的方式访问该对象。【Flutter使用RepositoryProvider解决跨组件传值问题】
RepositoryProvider定义
Repository
实际上是 Provider
的一个子类,通过注册单例的方式实现组件树对象共享,因此其注册的对象会随着 Provider
的注销而销毁,而且这个对象无需是 Bloc
子类。因此在无法使用 Bloc
传输共享对象的时候,可以使用 RepositoryProvider
来完成。RepositoryProvider有两种方式创建对象共享,create
和 value
方式,其中 create
是通过调用一个方法创建新的对象,而 value
是共享一个已有的对象。RepositoryProvider
的定义如下:class RepositoryProviderextends Provider with RepositoryProviderSingleChildWidget {RepositoryProvider({Key? key,required Create create,Widget? child,bool? lazy,}) : super(key: key,create: create,dispose: (_, __) {},child: child,lazy: lazy,); RepositoryProvider.value({Key? key,required T value,Widget? child,}) : super.value(key: key,value: value,child: child,); static T of (BuildContext context, {bool listen = false}) {try {return Provider.of (context, listen: listen); } on ProviderNotFoundException catch (e) {if (e.valueType != T) rethrow; throw FlutterError('''RepositoryProvider.of() called with a context that does not contain a repository of type $T.No ancestor could be found starting from the context that was passed to RepositoryProvider.of<$T>().This can happen if the context you used comes from a widget above the RepositoryProvider.The context used was: $context''',); }}}
RepositoryProviderSingleChildWidget本身是一个空的 Mixin:
mixin RepositoryProviderSingleChildWidget on SingleChildWidget {}
,注释上写着其用途是为了方便
MultiRepositoryProvider
推断RepositoryProvider
的类型设计。可以看到实际上 RepositoryProvider
就是 Provider
,只是将静态方法 of
的listen
参数默认设置为 false
了,也就是不监听状态对象的变化。我们在子组件中通过两种方式访问共享对象:// 方式1context.read()// 方式2RepositoryProvider.of (context)
如果有多个对象需要共享,可以使用
MultiRepositoryProvider
,使用方式也和 MultiProvider 相同 :MultiRepositoryProvider(providers: [RepositoryProvider(create: (context) => RepositoryA(),),RepositoryProvider (create: (context) => RepositoryB(),),RepositoryProvider (create: (context) => RepositoryC(),),],child: ChildA(),)
RepositoryProvider 应用 回顾一下我们之前使用 BlocBuilder 仿掘金个人主页的代码,在里面我们页面分成了三个部分:
- 头像及背景图:
_getBannerWithAvatar
; - 个人资料:
_getPersonalProfile
; - 个人数据统计:
_getPersonalStatistic
。
文章图片
PersonalEntity personalProfile = personalResponse.personalProfile!; return Stack(children: [CustomScrollView(slivers: [_getBannerWithAvatar(context, personalProfile),_getPersonalProfile(personalProfile),_getPersonalStatistic(personalProfile),],),// ...],); },//...
可以看到,每个函数都需要把
personalProfile
这个对象通过函数的参数传递,而如果函数中的组件还有下级组件需要这个对象,还需要继续往下传递。这要是需要修改对象传值的方式,需要沿着组件树逐级修改,维护起来会很不方便。我们改造一下,将三个函数构建组件分别换成自定义的 Widget,并且将个人统计区换成两级组件,改造后的组件树如下所示(省略了装饰类的层级)。文章图片
组件层级
拆解完之后,我们就可以简化
personalProfile
的传值了。RepositoryProvider.value(child: CustomScrollView(slivers: [const BannerWithAvatar(),const PersonalProfile(),const PersonalStatistic(),],),value: personalProfile,),// ...
这里使用
value
模式是因为 personalProfile
已经被创建了。然后在需要使用 personalProfile
的地方,使用context.read()
就可以从 RepositoryProvider
中取出personalProfile
对象了,从而使得各个子组件无需再传递该对象。以BannerWithAvatar 为例,如下所示:class BannerWithAvatar extends StatelessWidget {final double bannerHeight = 230; final double imageHeight = 180; final double avatarRadius = 45; final double avatarBorderSize = 4; const BannerWithAvatar({Key? key}) : super(key: key); @overrideWidget build(BuildContext context) {return SliverToBoxAdapter(child: Container(height: bannerHeight,color: Colors.white70,alignment: Alignment.topLeft,child: Stack(children: [Container(height: bannerHeight,),Positioned(top: 0,left: 0,child: CachedNetworkImage(imageUrl:'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=688497718,308119011&fm=26&gp=0.jpg',height: imageHeight,width: MediaQuery.of(context).size.width,fit: BoxFit.fill,),),Positioned(left: 20,top: imageHeight - avatarRadius - avatarBorderSize,child: _getAvatar(context.read().avatar,avatarRadius * 2,avatarBorderSize,),),],),),); }Widget _getAvatar(String avatarUrl, double size, double borderSize) {return Stack(alignment: Alignment.center, children: [Container(width: size + borderSize * 2,height: size + borderSize * 2,clipBehavior: Clip.antiAlias,decoration: BoxDecoration(color: Colors.white,borderRadius: BorderRadius.circular(size / 2 + borderSize),),),Container(width: size,height: size,clipBehavior: Clip.antiAlias,decoration: BoxDecoration(color: Colors.black,borderRadius: BorderRadius.circular(size / 2),),child: CachedNetworkImage(imageUrl: avatarUrl,height: size,width: size,fit: BoxFit.fill,),),]); }}
可以看到整个代码更简洁也更易于维护了。
总结 本篇介绍了
RepositoryProvider
的使用,实际上 RepositoryProvider
借用Provider
实现了一个组件树上的局部共享对象容器。通过这个容器,为RepositoryProvider
的子组件树注入了共享对象,使得子组件可以从 context
中或使用RepositoryProvider.of
静态方法获取共享对象。通过这种方式避免了组件树的层层传值,使得代码更为简洁和易于维护。以上就是Flutter使用RepositoryProvider解决跨组件传值问题的详细内容,更多关于Flutter跨组件传值的资料请关注脚本之家其它相关文章!
推荐阅读
- java|java 方法与数组基础使用详解
- C#|C#中Messagebox的简单使用
- 影像组学病理切片案例教学课程(免费赠送)另有现成的代码,模型供大家上手使用
- web后端|django restframework 使用问题收集
- python|pandas、openpyxl、xlrd&xlwt&xlutils耗时对比、使用踩坑
- vue|vue 项目中使用websocket的正确姿势
- Flutter使用AnimatedBuilder实现动效复用
- 如何使用|如何使用 Lightly IDE 导入第三方库()
- Docker部署项目完全使用指南(小结)
- Python数据可视化(5段代码搞定散点图绘制与使用,值得收藏)