Flutter使用RepositoryProvider解決跨組件傳值問題
前言
在實際開發(fā)過程中，經常會遇到父子組件傳值的情況，通常來說會有三種方式：
- 構造函數傳值：父組件將子組件需要的對象通過構造函數傳遞給子組件；
- 單例對象：構建單例對象，使得父子組件使用的是同一個對象；
- 容器：將對象存入容器中，父子組件使用的時候直接從容器中獲取。
第一種方式的缺陷是如果組件嵌套很深，傳遞數據對象需要層層傳遞，將導致代碼很難維護。第二種方式需要自己構建單例類，而實際上要傳遞的對象可能存在很多個實例。第三種和單例類似，如果往容器存儲不定數量的實例對象是不合適的。flutter_bloc 提供了一種基于組件的依賴注入方式解決這類問題，通過使用 RepositoryProvider，可以為組件樹的子組件提供共享對象，這個共享對象只限在組件樹中使用，可以通過 Provider 的方式訪問該對象。
RepositoryProvider定義
Repository 實際上是 Provider 的一個子類，通過注冊單例的方式實現(xiàn)組件樹對象共享，因此其注冊的對象會隨著 Provider 的注銷而銷毀，而且這個對象無需是 Bloc 子類。因此在無法使用 Bloc 傳輸共享對象的時候，可以使用 RepositoryProvider 來完成。RepositoryProvider有兩種方式創(chuàng)建對象共享，create 和 value 方式，其中 create 是通過調用一個方法創(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的類型設計?？梢钥吹綄嶋H上 RepositoryProvider就是 Provider，只是將靜態(tài)方法 of 的listen 參數默認設置為 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 應用
回顧一下我們之前使用 BlocBuilder 仿掘金個人主頁的代碼，在里面我們頁面分成了三個部分：
- 頭像及背景圖：
_getBannerWithAvatar； - 個人資料：
_getPersonalProfile； - 個人數據統(tǒng)計：
_getPersonalStatistic。
分別使用了三個構建組件的函數完成。對應的界面如下所示：
PersonalEntity?personalProfile?=?personalResponse.personalProfile!; ????????return?Stack( ??????????children:?[ ????????????CustomScrollView( ??????????????slivers:?[ ????????????????_getBannerWithAvatar(context,?personalProfile), ????????????????_getPersonalProfile(personalProfile), ????????????????_getPersonalStatistic(personalProfile), ??????????????], ????????????), ????????????//?... ??????????], ????????); ??????}, //...
可以看到，每個函數都需要把 personalProfile 這個對象通過函數的參數傳遞，而如果函數中的組件還有下級組件需要這個對象，還需要繼續(xù)往下傳遞。這要是需要修改對象傳值的方式，需要沿著組件樹逐級修改，維護起來會很不方便。我們改造一下，將三個函數構建組件分別換成自定義的 Widget，并且將個人統(tǒng)計區(qū)換成兩級組件，改造后的組件樹如下所示（省略了裝飾類的層級）。
組件層級
拆解完之后，我們就可以簡化personalProfile 的傳值了。
RepositoryProvider.value( ??child:?CustomScrollView( ????slivers:?[ ??????const?BannerWithAvatar(), ??????const?PersonalProfile(), ??????const?PersonalStatistic(), ????], ??), ??value:?personalProfile, ), //?...
這里使用value模式是因為 personalProfile 已經被創(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,
????????),
??????),
????]);
??}
}
可以看到整個代碼更簡潔也更易于維護了。
總結
本篇介紹了 RepositoryProvider 的使用，實際上 RepositoryProvider 借用Provider 實現(xiàn)了一個組件樹上的局部共享對象容器。通過這個容器，為RepositoryProvider的子組件樹注入了共享對象，使得子組件可以從 context 中或使用RepositoryProvider.of 靜態(tài)方法獲取共享對象。通過這種方式避免了組件樹的層層傳值，使得代碼更為簡潔和易于維護。
以上就是Flutter使用RepositoryProvider解決跨組件傳值問題的詳細內容，更多關于Flutter跨組件傳值的資料請關注腳本之家其它相關文章！
相關文章
Android自定義View實現(xiàn)微信支付密碼輸入框
這篇文章主要為大家詳細介紹了Android自定義View實現(xiàn)微信支付密碼輸入框，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-06-06
這篇文章主要介紹了Android App后臺服務報告工作狀態(tài)實例,使用LocalBroadcastManager發(fā)送和接收狀態(tài),需要的朋友可以參考下2014-06-06
這篇文章主要為大家詳細介紹了Android滑動沖突的完美解決方案，針對三種滑動沖突場景進行解決，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-01-01
淺談Android Classloader動態(tài)加載分析
這篇文章主要介紹了淺談Android Classloader動態(tài)加載分析，詳細的介紹了ClassLoader概念、分類，具有一定的參考價值，有興趣的可以了解一下2018-03-03
Android IPC機制ACtivity綁定Service通信代碼實例
這篇文章主要介紹了Android IPC機制ACtivity綁定Service通信代碼實例,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2020-09-09
Android向Excel寫入數據導出U盤并發(fā)送郵件
這篇文章主要為大家詳細介紹了Android將數據寫入Excel格式導出U盤、發(fā)送郵件，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-07-07
Android N 可以同時顯示多個應用窗口。在手機上，兩個應用可以在“分屏”模式中左右并排或上下并排顯示。本文將對此介紹。具有很好的參考價值。下面跟著小編一起來看下吧2017-05-05
android 開發(fā)過程中如何判斷當前是否是飛行模式和偵聽airplane mode change，本文將以此問題詳細介紹，需要了解的朋友可以參考下2012-11-11
這篇文章主要介紹了Android中使用的定時針(刷新頁面請求服務器)詳解的相關資料,需要的朋友可以參考下2016-12-12
深入剖析Android系統(tǒng)中Service和IntentService的區(qū)別
這篇文章主要介紹了Android系統(tǒng)中Service和IntentService的區(qū)別,與普通的服務相比,IntentService可以開啟單獨的線程來處理intent請求,需要的朋友可以參考下2016-04-04