在Flutter中组合两个列表

8fq7wneg 于 2023-06-24 发布在 Flutter

关注(0)|答案(1)|浏览(175)

我有一个类，它从我创建的模型中生成一个列表。
使用AppinioSwiper包生成列表。
下面是创建类的代码：

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

 import '../../../blocs/national id/ghana_card_list_bloc.dart';
 import '../../../models/national id/ghana_card_model.dart';
 import 'ghana_card_front_list.dart';

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

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

return StreamBuilder<List<GhanaCardResults>>(
  stream: ghanacardListBloc.ghanacardList,
  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) {
                          return GhanaCardFrontList(
                            ghanacardModel: snapshot.data![index],
                          );
                        },
                      )),
                ],
              )
      ],
    );
  },
);
 }
}

我想把上面创建的列表与下面创建的列表结合起来。
下面是第二个类的代码和列表：

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

   import '../../../blocs/card/card_list_block.dart';
   import '../../../models/credit card/card_model.dart';
   import 'card_front_list.dart';

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

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

return StreamBuilder<List<CardResults>>(
  stream: cardListBloc.cardList,
  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) {
                          return CardFrontList(
                            cardModel: snapshot.data![index],
                          );
                        },
                      )),
                ],
              )
      ],
    );
  },
);
  }
  }

我怎么能成功地实现这一点/我已经尝试了我所知道的一切，我被卡住了。

flutter

来源：https://stackoverflow.com/questions/76507940/combining-two-list-in-flutter

1条答案

按热度按时间

j2cgzkjk1#

列表是具有相同数据类型的数据的集合。
在您的示例中，您希望合并两种不同数据类型的列表：GhanaCardResults 和 CardResults。
你可以使用一个抽象类

abstract class BaseCardResults {}

并将其扩展为你需要的不同类型

class CardResultsTypeOne extends BaseCardResults {}
class CardResultsTypeTwo extends BaseCardResults {}

通过这样做，您现在可以拥有数据类型 BaseCardResults 的列表，您可以向其中添加 CardResultsTypeOne 和 CardResultsTypeTwo 对象。

final List<BaseCardResults> cards = [CardResultsTypeOne(),CardResultsTypeTwo(),CardResultsTypeOne(),CardResultsTypeTwo()]

区块管理器应该是将两个列表合并为一个的管理器。
一旦你有了列表，你只需要一个小部件来检测传递给它的卡片的数据类型，并相应地构建小部件，而不是使用 GhanaCardFrontList 和 CardFrontList
这个小部件可能看起来像这样：

class CardFrontList extends StatelessWidget {
  final BaseCardResult card;
  const CardFrontList({super.key, required this.card});

  @override
  Widget build(BuildContext context) => Scaffold(
    body: card.runtimeType == CardResultTypeOne
        ? _buildCardTypeOne(card: card as CardResultTypeOne)
        : _buildCardTypeTwo(card: card as CardResultTypeTwo),
  );

  Widget _buildCardTypeOne({required CardResultTypeOne card}) {
   /// build widget
  }
  Widget _buildCardTypeTwo({required CardResultTypeTwo card}) {
   /// build widget
  }
}

编辑：在这里，你可以使用一个小部件来显示卡片，下面我之前描述的。
请注意，现在块必须处理BaseCardResults列表

import 'package:flutter/material.dart';

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

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

 return StreamBuilder<List<BaseCardResults>>(
  stream: listBloc.cardList,
  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) {
                          return CardFrontList(
                            baseCardResult: snapshot.data![index],
                          );
                        },
                      )),
                ],
              )
      ],
    );
   },
  );
 }
}

不同的方法

在这种情况下，由于GhanaCardList和CardList几乎相同，您可以尝试一种更快的方法是将它们放入Stack小部件中，以便它们一个在另一个上面显示。

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

 @override
 Widget build(BuildContext context) {
   return Scaffold(
        body: Stack(
          children: [
            GhanaCardList(),
            CardList(),
          ],
        ),
     );
 }
}

无论如何，我还是建议您只使用一个列表和一个小部件来处理它，正如前面所述，这样您就不会有多余的代码了。

赞(0）回复(0）举报 2023-06-24

我来回答

在Flutter中组合两个列表

1条答案

相关问题

热门标签

最新问答