快捷導(dǎo)航

Flutter使用RepositoryProvider解決跨組件傳值問題

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

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

前言

在實際開發(fā)過程中，經(jīng)常會遇到父子組件傳值的情況，通常來說會有三種方式：

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

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

RepositoryProvider定義

Repository 實際上是 Provider 的一個子類，通過注冊單例的方式實現(xiàn)組件樹對象共享，因此其注冊的對象會隨著 Provider 的注銷而銷毀，而且這個對象無需是 Bloc 子類。因此在無法使用 Bloc 傳輸共享對象的時候，可以使用 RepositoryProvider 來完成。RepositoryProvider有兩種方式創(chuàng)建對象共享，create 和 value 方式，其中 create 是通過調(diào)用一個方法創(chuàng)建新的對象，而 value 是共享一個已有的對象。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本身是一個空的 Mixin：

mixin?RepositoryProviderSingleChildWidget?on?SingleChildWidget?{}

，注釋上寫著其用途是為了方便 MultiRepositoryProvider推斷RepositoryProvider的類型設(shè)計?？梢钥吹綄嶋H上 RepositoryProvider就是 Provider，只是將靜態(tài)方法 of 的listen 參數(shù)默認(rèn)設(shè)置為 false 了，也就是不監(jiān)聽狀態(tài)對象的變化。我們在子組件中通過兩種方式訪問共享對象：

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

如果有多個對象需要共享，可以使用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 仿掘金個人主頁的代碼，在里面我們頁面分成了三個部分：

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

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

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

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

組件層級

拆解完之后，我們就可以簡化personalProfile 的傳值了。

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

這里使用value模式是因為 personalProfile 已經(jīng)被創(chuàng)建了。然后在需要使用 personalProfile 的地方，使用context.read<PersonalEntity>()就可以從 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);

??@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,
????????),
??????),
????]);
??}
}

可以看到整個代碼更簡潔也更易于維護了。

總結(jié)

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

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

您可能感興趣的文章: