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

Question

这一次，非凡的代码没有问题。我只是找不到办法。

首先，我想做什么？

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

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 自动填写来自动创建卡片数据。有点像这样：我有非常不同的蛋糕（列表中的数据），我想自动将它们放入同一个盒子（MissionCard）中。 当他们完成时，所有卡片都应该在列中堆叠。例如，我的代码应该从此列表中创建 2 张不同的卡片。

第二：怎么了？

我不知道我怎么能做到这一点。这是一种自动化，我在脑海中堆积。我需要一个解决方案。如果我不能告诉案例，我可以画逻辑示意图。抱歉耽误了您的时间，我希望您能帮助我并告诉我如何解决这个问题！！！

Answer 1

如果你有一个MissionListTemplate 对象，你大概可以（根据通常的约定）从它创建一个MissionCard：

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

这将返回一个Widget。

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

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
}

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

Column(
  children: missionCardList,
)