flutter怎么使用repositoryprovider解决跨组件传值问题-mile米乐体育

flutter怎么使用repositoryprovider解决跨组件传值问题

这篇文章主要介绍“flutter怎么使用repositoryprovider解决跨组件传值问题”，在日常操作中，相信很多人在flutter怎么使用repositoryprovider解决跨组件传值问题问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”flutter怎么使用repositoryprovider解决跨组件传值问题”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！

前言

在实际开发过程中，经常会遇到父子组件传值的情况，通常来说会有三种方式：

• 构造函数传值：父组件将子组件需要的对象通过构造函数传递给子组件；

• 单例对象：构建单例对象，使得父子组件使用的是同一个对象；

• 容器：将对象存入容器中，父子组件使用的时候直接从容器中获取。

第一种方式的缺陷是如果组件嵌套很深，传递数据对象需要层层传递，将导致代码很难维护。第二种方式需要自己构建单例类，而实际上要传递的对象可能存在很多个实例。第三种和单例类似，如果往容器存储不定数量的实例对象是不合适的。flutter_bloc 提供了一种基于组件的依赖注入方式解决这类问题，通过使用repositoryprovider，可以为组件树的子组件提供共享对象，这个共享对象只限在组件树中使用，可以通过provider的方式访问该对象。

repositoryprovider定义

repository实际上是provider的一个子类，通过注册单例的方式实现组件树对象共享，因此其注册的对象会随着provider的注销而销毁，而且这个对象无需是bloc子类。因此在无法使用bloc传输共享对象的时候，可以使用repositoryprovider来完成。repositoryprovider有两种方式创建对象共享，create和value方式，其中create是通过调用一个方法创建新的对象，而value是共享一个已有的对象。repositoryprovider的定义如下：

classrepositoryproviderextendsproviderwithrepositoryprovidersinglechildwidget{repositoryprovider({key?key,requiredcreatecreate,widget?child,bool?lazy,}):super(key:key,create:create,dispose:(_,__){},child:child,lazy:lazy,);repositoryprovider.value({key?key,requiredtvalue,widget?child,}):super.value(key:key,value:value,child:child,);statictof(buildcontextcontext,{boollisten=false}){try{returnprovider.of(context,listen:listen);}onprovidernotfoundexceptioncatch(e){if(e.valuetype!=t)rethrow;throwfluttererror('''repositoryprovider.of()calledwithacontextthatdoesnotcontainarepositoryoftype$t.noancestorcouldbefoundstartingfromthecontextthatwaspassedtorepositoryprovider.of<$t>().thiscanhappenifthecontextyouusedcomesfromawidgetabovetherepositoryprovider.thecontextusedwas:$context''',);}}}

repositoryprovidersinglechildwidget本身是一个空的 mixin：

mixinrepositoryprovidersinglechildwidgetonsinglechildwidget{}

，注释上写着其用途是为了方便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 仿掘金个人mile米乐体育主页的代码，在里面我们页面分成了三个部分：

• 头像及背景图：_getbannerwithavatar；

• 个人资料：_getpersonalprofile；

• 个人数据统计：_getpersonalstatistic。

分别使用了三个构建组件的函数完成。对应的界面如下所示：

personalentitypersonalprofile=personalresponse.personalprofile!;returnstack(children:[customscrollview(slivers:[_getbannerwithavatar(context,personalprofile),_getpersonalprofile(personalprofile),_getpersonalstatistic(personalprofile),],),//...],);},//...

可以看到，每个函数都需要把personalprofile这个对象通过函数的参数传递，而如果函数中的组件还有下级组件需要这个对象，还需要继续往下传递。这要是需要修改对象传值的方式，需要沿着组件树逐级修改，维护起来会很不方便。我们改造一下，将三个函数构建组件分别换成自定义的 widget，并且将个人统计区换成两级组件，改造后的组件树如下所示（省略了装饰类的层级）。

组件层级

拆解完之后，我们就可以简化personalprofile的传值了。

repositoryprovider.value(child:customscrollview(slivers:[constbannerwithavatar(),constpersonalprofile(),constpersonalstatistic(),],),value:personalprofile,),//...

这里使用value模式是因为personalprofile已经被创建了。然后在需要使用personalprofile的地方，使用context.read()就可以从repositoryprovider中取出personalprofile对象了，从而使得各个子组件无需再传递该对象。以bannerwithavatar 为例，如下所示：

classbannerwithavatarextendsstatelesswidget{finaldoublebannerheight=230;finaldoubleimageheight=180;finaldoubleavatarradius=45;finaldoubleavatarbordersize=4;constbannerwithavatar({key?key}):super(key:key);@overridewidgetbuild(buildcontextcontext){returnslivertoboxadapter(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(stringavatarurl,doublesize,doublebordersize){returnstack(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,),),]);}}

可以看到整个代码更简洁也更易于维护了。

到此，关于“flutter怎么使用repositoryprovider解决跨组件传值问题”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注恰卡编程网网站，小编会继续努力为大家带来更多实用的文章！