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

2022-04-02 16:00:14

前言

在實際開發過程中，經常會遇到父子元件傳值的情況，通常來說會有三種方式：

建構函式傳值：父元件將子元件需要的物件通過建構函式傳遞給子元件；
單例物件：構建單例物件，使得父子元件使用的是同一個物件；
容器：將物件存入容器中，父子元件使用的時候直接從容器中獲取。

第一種方式的缺陷是如果元件巢狀很深，傳遞資料物件需要層層傳遞，將導致程式碼很難維護。第二種方式需要自己構建單例類，而實際上要傳遞的物件可能存在很多個範例。第三種和單例類似，如果往容器儲存不定數量的範例物件是不合適的。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,
        ),
      ),
    ]);
  }
}

可以看到整個程式碼更簡潔也更易於維護了。

總結

本篇介紹了 RepositoryProvider 的使用，實際上 RepositoryProvider 借用Provider 實現了一個元件樹上的區域性共用物件容器。通過這個容器，為RepositoryProvider的子元件樹注入了共用物件，使得子元件可以從 context 中或使用RepositoryProvider.of 靜態方法獲取共用物件。通過這種方式避免了元件樹的層層傳值，使得程式碼更為簡潔和易於維護。

以上就是Flutter使用RepositoryProvider解決跨元件傳值問題的詳細內容，更多關於Flutter跨元件傳值的資料請關注it145.com其它相關文章！

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

目錄

前言

RepositoryProvider定義

RepositoryProvider 應用

總結

熱門文章