dart - 是否可以循环使用 flutter 卡片？

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

             }
           ),