（颤振）在UI中按不同组显示列表数据

Question

我有一个列表（来自数据库表），如下所示： （注意：我已经反序列化了列表）

groupNo | Sales
---------------
  1        5
  1        1  
  1        3
  2        6  
  2        9  
  2        2
  2        1  
  3        8  
  3        3  
  4        4  
  4        1  
  4        6  
  4        0  
  4        4  
  4        1  

现在，我要显示以下数据：

在用户界面中显示此内容的最佳方法是什么？

Answer 1

可以说该列表称为itemList

首先，我们需要一个有关组数的列表。由于在itemList中重复了组号，因此无法直接使用该组号为每个组构建卡。因此，我们可以将groupNo中的所有itemList添加到Set中（因为Set将删除所有重复值）。

我们首先声明一个Set

Set groupSet = Set();

此后，我们创建一个readGroup()函数，它将在initState中声明

readGroup() {
  setState((){  
   itemList.forEach((item){
     groupSet.add(item.groupNo);
     });
    });
   }

现在，我们将使用ListView.builder为每个组创建一张卡。在构建器内部，我们将使用for循环在各自卡中填充每个组的项目。

注意：我们不使用Set中的组号，因为不能保证Set中项目的顺序。因此，我们改为使用index + 1。

ListView.builder(
 itemCount: groupSet.length,
 itemBuilder: (context, index) {
   return Column( children:<Widget>[
   Text("Group "+ (index + 1).toString()),
    SizedBox(height:10),
     Row(children: <Widget>[
      for(item in List) if(item.groupNo = index + 1)  
       Text(item.sales)
       ]);
      ]);
     }
   );