我怎样才能在卡片上循环？

Question

这是我想要做的

child: FutureBuilder(
         future: ProductRepo().getMyProduct(),
         builder: (BuildContext context, AsyncSnapshot res){
           if(res.data==null){
             return Container(
                  child: Text('this is nice'),
              );
           }
           return Container(
             child: Column(
                children: <Widget>[
                  Card(
                      child: Text('I just want to loop over this card :)'),
                  ),

                ],
              )

           );

         }
       ),

我总是发现人们循环遍历listView.builder。任何人都可以帮忙。谢谢。

Answer 1

我认为你对使用这些小部件感到有些困惑。

实际上，ListView和Column都可用于显示小部件列表，但是，ListView.builder(...)提供了一种重用小部件的方法，因此当您必须创建大量小部件时，内存效率更高。

例如，当您要显示电子商务应用程序的电子列表时。对于每个电子项目，你有一个照片，标题和价格，在这种情况下，你会想要使用ListView.builder，因为列表可能很大，你不想耗尽内存。

另一方面，当你有少量的小部件应该以类似列表的方式显示（或者一个在另一个之下）时，应该使用Column。

对于您的情况，如果您想将您拥有的对象列表转换为卡片列表，您可以执行以下操作：

FutureBuilder(
         future: ProductRepo().getMyProduct(),
         builder: (BuildContext context, AsyncSnapshot res){
           if(res.data==null){
             return Container(
                  child: Text('this is nice'),
              );
           }
           return Container(
             child: Column(
                    children: res.data.map((item) {
                                return Card(child: Text(item.name));
                              }).toList());
           );

         }
       ),

我假设res.data是一个元素列表，每个元素都有一个名为name的属性。同样在return Card(...)系列中，如果需要，您可以对该项目进行额外处理。

希望这可以帮助你:)。

如果你需要做更多的处理

您可以在方法或方法链中提取处理，如下所示：

 List<Widget>prepareCardWidgets(List<SomeObject> theObjects){
 //here you can do any processing you need as long as you return a list of ```Widget```. 
      List<Widget> widgets = [];
      theObjects.forEach((item) {
        widgets.add(Card(child: Text(item.name),));
      });

      return widgets;
    }

然后你可以像这样使用它：

 FutureBuilder(
             future: ProductRepo().getMyProduct(),
             builder: (BuildContext context, AsyncSnapshot res){
               if(res.data==null){
                 return Container(
                      child: Text('this is nice'),
                  );
               }
               return Container(
                 child: Column(
                        children: prepareCardWidgets(res.data)
               );

             }
           ),