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)
               );

             }
           ),

如何循环打卡？

1 个答案: