Flutter使用RepositoryProvider解決跨組件傳值問(wèn)題

更新時(shí)間：2022年04月02日 11:52:46 作者：島上碼農(nóng)

在實(shí)際開(kāi)發(fā)過(guò)程中，經(jīng)常會(huì)遇到父子組件傳值的情況。本文將利用RepositoryProvider解決跨組件傳值的問(wèn)題，感興趣的小伙伴可以了解一下

前言

在實(shí)際開(kāi)發(fā)過(guò)程中，經(jīng)常會(huì)遇到父子組件傳值的情況，通常來(lái)說(shuō)會(huì)有三種方式：

構(gòu)造函數(shù)傳值：父組件將子組件需要的對(duì)象通過(guò)構(gòu)造函數(shù)傳遞給子組件；
單例對(duì)象：構(gòu)建單例對(duì)象，使得父子組件使用的是同一個(gè)對(duì)象；
容器：將對(duì)象存入容器中，父子組件使用的時(shí)候直接從容器中獲取。

第一種方式的缺陷是如果組件嵌套很深，傳遞數(shù)據(jù)對(duì)象需要層層傳遞，將導(dǎo)致代碼很難維護(hù)。第二種方式需要自己構(gòu)建單例類(lèi)，而實(shí)際上要傳遞的對(duì)象可能存在很多個(gè)實(shí)例。第三種和單例類(lèi)似，如果往容器存儲(chǔ)不定數(shù)量的實(shí)例對(duì)象是不合適的。flutter_bloc 提供了一種基于組件的依賴(lài)注入方式解決這類(lèi)問(wèn)題，通過(guò)使用 RepositoryProvider，可以為組件樹(shù)的子組件提供共享對(duì)象，這個(gè)共享對(duì)象只限在組件樹(shù)中使用，可以通過(guò) Provider 的方式訪問(wèn)該對(duì)象。

RepositoryProvider定義

Repository 實(shí)際上是 Provider 的一個(gè)子類(lèi)，通過(guò)注冊(cè)單例的方式實(shí)現(xiàn)組件樹(shù)對(duì)象共享，因此其注冊(cè)的對(duì)象會(huì)隨著 Provider 的注銷(xiāo)而銷(xiāo)毀，而且這個(gè)對(duì)象無(wú)需是 Bloc 子類(lèi)。因此在無(wú)法使用 Bloc 傳輸共享對(duì)象的時(shí)候，可以使用 RepositoryProvider 來(lái)完成。RepositoryProvider有兩種方式創(chuàng)建對(duì)象共享，create 和 value 方式，其中 create 是通過(guò)調(diào)用一個(gè)方法創(chuàng)建新的對(duì)象，而 value 是共享一個(gè)已有的對(duì)象。RepositoryProvider的定義如下：

class?RepositoryProvider<T>?extends?Provider<T>
????with?RepositoryProviderSingleChildWidget?{
??RepositoryProvider({
????Key??key,
????required?Create<T>?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<T>(BuildContext?context,?{bool?listen?=?false})?{
????try?{
??????return?Provider.of<T>(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本身是一個(gè)空的 Mixin：

mixin?RepositoryProviderSingleChildWidget?on?SingleChildWidget?{}

，注釋上寫(xiě)著其用途是為了方便 MultiRepositoryProvider推斷RepositoryProvider的類(lèi)型設(shè)計(jì)。可以看到實(shí)際上 RepositoryProvider就是 Provider，只是將靜態(tài)方法 of 的listen 參數(shù)默認(rèn)設(shè)置為 false 了，也就是不監(jiān)聽(tīng)狀態(tài)對(duì)象的變化。我們?cè)谧咏M件中通過(guò)兩種方式訪問(wèn)共享對(duì)象：

//?方式1
context.read<T>()
//?方式2
RepositoryProvider.of<T>(context)

如果有多個(gè)對(duì)象需要共享，可以使用MultiRepositoryProvider，使用方式也和 MultiProvider 相同：

MultiRepositoryProvider(
??providers:?[
????RepositoryProvider<RepositoryA>(
??????create:?(context)?=>?RepositoryA(),
????),
????RepositoryProvider<RepositoryB>(
??????create:?(context)?=>?RepositoryB(),
????),
????RepositoryProvider<RepositoryC>(
??????create:?(context)?=>?RepositoryC(),
????),
??],
??child:?ChildA(),
)

RepositoryProvider 應(yīng)用

回顧一下我們之前使用 BlocBuilder 仿掘金個(gè)人主頁(yè)的代碼，在里面我們頁(yè)面分成了三個(gè)部分：

頭像及背景圖：_getBannerWithAvatar；
個(gè)人資料：_getPersonalProfile；
個(gè)人數(shù)據(jù)統(tǒng)計(jì)：_getPersonalStatistic。

分別使用了三個(gè)構(gòu)建組件的函數(shù)完成。對(duì)應(yīng)的界面如下所示：

PersonalEntity?personalProfile?=?personalResponse.personalProfile!;
????????return?Stack(
??????????children:?[
????????????CustomScrollView(
??????????????slivers:?[
????????????????_getBannerWithAvatar(context,?personalProfile),
????????????????_getPersonalProfile(personalProfile),
????????????????_getPersonalStatistic(personalProfile),
??????????????],
????????????),
????????????//?...
??????????],
????????);
??????},
//...

可以看到，每個(gè)函數(shù)都需要把 personalProfile 這個(gè)對(duì)象通過(guò)函數(shù)的參數(shù)傳遞，而如果函數(shù)中的組件還有下級(jí)組件需要這個(gè)對(duì)象，還需要繼續(xù)往下傳遞。這要是需要修改對(duì)象傳值的方式，需要沿著組件樹(shù)逐級(jí)修改，維護(hù)起來(lái)會(huì)很不方便。我們改造一下，將三個(gè)函數(shù)構(gòu)建組件分別換成自定義的 Widget，并且將個(gè)人統(tǒng)計(jì)區(qū)換成兩級(jí)組件，改造后的組件樹(shù)如下所示（省略了裝飾類(lèi)的層級(jí)）。

組件層級(jí)

拆解完之后，我們就可以簡(jiǎn)化personalProfile 的傳值了。

RepositoryProvider.value(
??child:?CustomScrollView(
????slivers:?[
??????const?BannerWithAvatar(),
??????const?PersonalProfile(),
??????const?PersonalStatistic(),
????],
??),
??value:?personalProfile,
),
//?...

這里使用value模式是因?yàn)?nbsp;personalProfile 已經(jīng)被創(chuàng)建了。然后在需要使用 personalProfile 的地方，使用context.read<PersonalEntity>()就可以從 RepositoryProvider 中取出personalProfile對(duì)象了，從而使得各個(gè)子組件無(wú)需再傳遞該對(duì)象。以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);

??@override
??Widget?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<PersonalEntity>().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,
????????),
??????),
????]);
??}
}

可以看到整個(gè)代碼更簡(jiǎn)潔也更易于維護(hù)了。

總結(jié)

本篇介紹了 RepositoryProvider 的使用，實(shí)際上 RepositoryProvider 借用Provider 實(shí)現(xiàn)了一個(gè)組件樹(shù)上的局部共享對(duì)象容器。通過(guò)這個(gè)容器，為RepositoryProvider的子組件樹(shù)注入了共享對(duì)象，使得子組件可以從 context 中或使用RepositoryProvider.of 靜態(tài)方法獲取共享對(duì)象。通過(guò)這種方式避免了組件樹(shù)的層層傳值，使得代碼更為簡(jiǎn)潔和易于維護(hù)。

以上就是Flutter使用RepositoryProvider解決跨組件傳值問(wèn)題的詳細(xì)內(nèi)容，更多關(guān)于Flutter跨組件傳值的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: