Flutter中合并两个AppinioSwiper卡片列表的实现方法

你已经实现了两个独立的滑动卡片组件，分别从GhanaCardListBloc和CardListBloc获取不同类型的数据并渲染卡片。要将它们合并为统一的滑动流，可按以下步骤实现：

步骤1：创建统一数据包装类 #

由于两个数据源的Model类型不同，先通过密封类将它们统一为同一类型，方便后续合并处理：

sealed class UnifiedCard {}

class GhanaCardItem extends UnifiedCard {
  final GhanaCardResults data;
  GhanaCardItem(this.data);
}

class CreditCardItem extends UnifiedCard {
  final CardResults data;
  CreditCardItem(this.data);
}

步骤2：合并两个数据流 #

使用rxdart的CombineLatest2将两个独立的列表流合并为一个UnifiedCard类型的列表流，确保两个数据源的数据都能被统一处理：

Stream<List<UnifiedCard>> get unifiedCardStream => CombineLatest2.combine2(
      ghanacardListBloc.ghanacardList,
      cardListBloc.cardList,
      (List<GhanaCardResults> ghanaCards, List<CardResults> creditCards) {
        final List<UnifiedCard> unified = [];
        // 可调整添加顺序改变卡片在滑动流中的排列顺序
        unified.addAll(ghanaCards.map((e) => GhanaCardItem(e)));
        unified.addAll(creditCards.map((e) => CreditCardItem(e)));
        return unified;
      },
    );

步骤3：实现统一的滑动卡片组件 #

创建新的组件，监听合并后的数据流，并根据数据类型渲染对应的卡片：

import 'package:appinio_swiper/appinio_swiper.dart';
import 'package:flutter/material.dart';
import 'package:rxdart/rxdart.dart';

import '../../../blocs/national id/ghana_card_list_bloc.dart';
import '../../../blocs/card/card_list_block.dart';
import '../../../models/national id/ghana_card_model.dart';
import '../../../models/credit card/card_model.dart';
import 'ghana_card_front_list.dart';
import 'card_front_list.dart';

sealed class UnifiedCard {}

class GhanaCardItem extends UnifiedCard {
  final GhanaCardResults data;
  GhanaCardItem(this.data);
}

class CreditCardItem extends UnifiedCard {
  final CardResults data;
  CreditCardItem(this.data);
}

class UnifiedCardList extends StatelessWidget {
  const UnifiedCardList({super.key});

  Stream<List<UnifiedCard>> get unifiedCardStream => CombineLatest2.combine2(
        ghanacardListBloc.ghanacardList,
        cardListBloc.cardList,
        (List<GhanaCardResults> ghanaCards, List<CardResults> creditCards) {
          final List<UnifiedCard> unified = [];
          unified.addAll(ghanaCards.map((e) => GhanaCardItem(e)));
          unified.addAll(creditCards.map((e) => CreditCardItem(e)));
          return unified;
        },
      );

  @override
  Widget build(BuildContext context) {
    final screenSize = MediaQuery.of(context).size;

    return StreamBuilder<List<UnifiedCard>>(
      stream: unifiedCardStream,
      builder: (context, snapshot) {
        return Column(
          children: <Widget>[
            const SizedBox(height: 200.0),
            !snapshot.hasData
                ? const Center(
                    child: CircularProgressIndicator(
                      strokeWidth: 2.0,
                      color: Colors.white,
                    ),
                  )
                : Column(
                    children: [
                      SizedBox(
                        height: screenSize.height * 0.6,
                        width: screenSize.width * 0.8,
                        child: AppinioSwiper(
                          cardsCount: snapshot.data!.length,
                          swipeOptions: AppinioSwipeOptions.vertical,
                          loop: true,
                          allowUnswipe: false,
                          direction: AppinioSwiperDirection.top,
                          cardsBuilder: (BuildContext context, int index) {
                            final item = snapshot.data![index];
                            if (item is GhanaCardItem) {
                              return GhanaCardFrontList(
                                ghanacardModel: item.data,
                              );
                            } else if (item is CreditCardItem) {
                              return CardFrontList(
                                cardModel: item.data,
                              );
                            } else {
                              return const SizedBox.shrink();
                            }
                          },
                        ),
                      ),
                    ],
                  )
          ],
        );
      },
    );
  }
}

注意事项 #

1. 需在pubspec.yaml中添加rxdart依赖：

   dependencies:
     rxdart: ^0.27.7 # 可替换为最新版本
   

2. 若需要打乱卡片顺序，可在合并列表时加入unified.shuffle();
3. 若需单独处理单个数据源的加载状态，可在CombineLatest2的回调中对空数据做特殊处理

内容的提问来源于stack exchange，提问作者SEYRAM EMMANUEL AGBANYO