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的定義如下：

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的類型設計。可以看到實際上 RepositoryProvider就是 Provider，只是將靜態方法 of 的listen 參數默認設置為 false 了，也就是不監聽狀態對象的變化。我們在子組件中通過兩種方式訪問共享對象：

// 方式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；

• 個人數據統計：_getPersonalStatistic。

分別使用了三個構建組件的函數完成。對應的界面如下所示：

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

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

組件層級

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

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

這里使用value模式是因為 personalProfile 已經被創建了。然后在需要使用 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,
        ),
      ),
    ]);
  }
}

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

到此，關于“Flutter怎么使用RepositoryProvider解決跨組件傳值問題”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！