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

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

Provider.ofT(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

{}

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

//

方式1

context.readT()

//

方式2

RepositoryProvider.ofT(context)

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

MultiRepositoryProvider(

providers:

[

RepositoryProviderRepositoryA(

create:

(context)

=

RepositoryA(),

),

RepositoryProviderRepositoryB(

create:

(context)

=

RepositoryB(),

),

RepositoryProviderRepositoryC(

create:

(context)

=

RepositoryC(),

),

child:

ChildA(),

RepositoryProvider應(yīng)用

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

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

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

PersonalEntity

personalProfile

=

personalResponse.personalProfile!;

return

Stack(

children:

[

CustomScrollView(

slivers:

[

_getBannerWithAvatar(context,

personalProfile),

_getPersonalProfile(personalProfile),

_getPersonalStatistic(personalProfile),

],

),

//

...

],

);

},

//...

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

組件層級

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

RepositoryProvider.value(

child:

CustomScrollView(

slivers:

[

const

BannerWithAvatar(),

const

PersonalProfile(),

const

PersonalStatistic(),

],

value:

personalProfile,

//

...

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

'/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=688497718,308119011fm=26gp=0.jpg',

height:

imageHeight,

width:

MediaQuery.of(context).size.width,

fit:

BoxFit.fill,

),

),

Positioned(

left:

20,

top:

imageHeight

-

avatarRadius

-

avatarBorderSize,

child:

_getAvatar(

context.readPersonalEntity().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è)代碼更簡潔也更易于維護(hù)了。

總結(jié)

本篇介紹了RepositoryProvider的使用，實(shí)