如何通过Flutter中的卡片类和列表类创建卡片列表？

Question

这次，非常出色，代码没有问题。我只是找不到一种方法来做到这一点。

首先，我想做什么？

我想将自动创建的卡片列表作为列表，以从列表中获取数据。在我看来，它有两个部分。其中之一是我有一张从卡类制作的卡模板。就像这样：

class MissionCard extends StatelessWidget {
  MissionCard({ @required this.cardOwner, @required this.missionName1, @required this.color,@required this.missionName2 });
  final String cardOwner;
  final String missionName1;
  final String missionName2;
  final Color color;
  @override
  Widget build(BuildContext context) {
    return Container(
      width: 300,
      height: 105,
      child: Card(
        shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(15.0)),
        color: color,
        elevation: 10,
        
        
        child: Padding(
          padding: const EdgeInsets.all(10.0),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            
            children: <Widget>[
              Image.asset(cardOwner.toString(), height: 60,width: 60,fit: BoxFit.fitWidth,),
              Image.asset(missionName1.toString(), height: 60,width: 60,fit: BoxFit.fitWidth,),
              Image.asset(missionName2.toString(), height: 60,width: 60,fit: BoxFit.fitWidth,),
              Image.asset("assets/assetsname", height: 60,width: 60,fit: BoxFit.fitWidth,),
              
            ],
          ),
        )
      ),

    );
  }
}

我可以制作一张卡片，如果您愿意的话，我会手动填写此数据。

final String cardOwner;
  final String missionName1;
  final String missionName2;

但是我希望此数据将自动从列表中添加。这是示例数据列表。

List
<MissionListTemplate> cardData = 

[ MissionListTemplate( 

missionOwner: "assets/owner.png", 
missionName1: "assets/mission1.png", 
missionName2: "assets/mission2.png" ), 

MissionListTemplate( 

missionOwner: "assets/owner.png", 
missionName1: "assets/mission1.png", 
missionName2: "assets/mission2.png"
  ) ];

我希望通过从MissionListTamplate自动填写来自动创建卡片数据。有点像：我有非常不同的蛋糕（List中的数据），我想自动将它们放入同一个盒子（MissionCard）中。当所有卡牌都收齐后，它们应该在列中堆叠。例如，我的代码应从此列表中创建2张不同的卡片。

第二：怎么了？

我不知道该怎么做。这是一种自动化，我脑子里浮现了。我需要一个解决方案。如果我不能说清楚，我可以画逻辑示意图。抱歉，请抽出宝贵时间，希望您能帮助我，并告诉我如何解决！！！

Answer 1

如果您有一个MissionListTemplate对象，则可以（根据常规约定）从中创建一个MissionCard，例如：

MissionCard(cardOwner: MissionListTemplate.missionOwner, missionName1: MissionListTemplate.missionName1, missionName2: MissionListTemplate.missionName2);

这将返回Widget。

您具有MissionListTemplate的列表，因此可以遍历该列表并为列表中的每个项目创建一个MissionCard。同样，MissionCard是Widget，因此您将所有这些Widget存储在列表中以备将来使用，例如：

List<Widget> missionCardList = new List(); // Creating a List of Widgets

for(template in cardData){
  missionCardList.add(MissionCard(
    cardOwner: template.missionOwner, 
    missionName1: template.missionName1, 
    missionName2: template.missionName2
    )
  ); // Adding new MissionCard to the list above
}

现在您已经获得MissionCard的列表以及所需的值。您需要做的只是将它们放在Stack /Column/Row/ etc中。根据您的选择。如果您查看这些小部件，它们会将子代而不是单个子代作为参数。 children参数需要一个...是的，Widget的列表。这正是您在上面创建的。因此，您只需将父小部件的子级设置为missionCardList并完成它，如下所示：

Column(
  children: missionCardList,
)