Question

需要创建逐组网格视图。我快完成了。我的json看起来像这样，

[{“ d”：“健身房”，“ p”：0}，{“ d”：“升降机”，“ p”：0}，{“ d”：“办公室”， “ p”：0}，{“ d”：“宾馆客房”，“ p”：1.1}，{“ d”：“房屋正门”， “ p”：1.2}，{“ d”：“餐厅”，“ p”：1.3}，{“ d”：“多功能厅”， “ p”：1.4}，{“ d”：“外部”，“ p”：1.5}，{“ d”：“娱乐”，“ p”： 1.6}，{“ d”：“洗衣”，“ p”：3.1}，{“ d”：“影音设备”，“ p”：3.2}，{“ d”：“餐饮设备”，“ p “：3.3}，{” d“：”其他设备“，” p“： 4.1}，{“ d”：“屋后”，“ p”：4.2}，{“ d”：“中央植物”，“ p”：4.3}，{“ d”：“标题”，“ p” ：5}，{“ d”：“管道”，“ p”：5.1 }，{“ d”：“基本服务”，“ p”：5.2}，{“ d”：“车间设备”，“ p”：5.3}，{“ d”：“ HSK设备”，“ p”：5.4}，{“ d”： “电气设备”，“ p”：5.5}，{“ d”：“商务中心”，“ p”：100 }]

 Widget createListView(BuildContext context, AsyncSnapshot snapshot) {
    List<Data> values = snapshot.data;
    final listCount = getItemCounter(values);
//    final listCount =
//        values.map<double>((m) => m.p).reduce((a, b) => max(a, b)).floor();

    return CustomScrollView(
      slivers: <Widget>[
        SliverList(
          delegate: SliverChildBuilderDelegate((context, i) {
            final items = values
                .where((m) => i + 1 <= m.p && m.p < i + 2)
                .toList(growable: false)
                  ..sort((a, b) => a.p.compareTo(b.p));
            return GridView.builder(
              itemCount: items.length,
              shrinkWrap: true,
              primary: false,
             gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 4),
              itemBuilder: (context, i) {
                final item = items[i];
                return _builderItem(item);
              },
            );
          }, childCount: listCount),
        )
      ],
    );
  }
 getItemCounter(List<Data> values){
    List iPoint = [];
    List distictI = [];
    for(int i = 0; i < values.length; i++){
      iPoint.add(values[i].p.toInt());
    }
    //remove duplicate
    distictI = iPoint.toSet().toList();
    return distictI.length;
  }

这是我的输出，

我发现了一个为什么会发生这种情况的问题，在我的json P传递了1.1,1.2,1.3之后又传递了3.1,3.2 ..空格，因为缺少数字02

Answer 1

您在这里：

 Widget createListView(BuildContext context, AsyncSnapshot snapshot) {
    List<Data> values = snapshot.data;
    final pIntValues = values.map<int>((m) => m.p.toInt()).toSet().toList(growable: false)..sort();

    return CustomScrollView(
      slivers: <Widget>[
        SliverList(
          delegate: SliverChildBuilderDelegate((context, i) {
            final p = pIntValues[i];
            final items = values
                .where((m) => p <= m.p && m.p < p + 1)
                .toList(growable: false)
                  ..sort((a, b) => a.p.compareTo(b.p));
//check if not items, return Container if true
            if(items.length == 0)
              return Container(); 
            return GridView.builder(
              itemCount: items.length,
              shrinkWrap: true,
              primary: false,
             gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 4),
              itemBuilder: (context, i) {
                final item = items[i];
                return _builderItem(item);
              },
            );
          }, childCount: pIntValues.length),
        )
      ],
    );
  }

如果该组没有项目，请返回Container而不是GridView。

如何删除GridView中的空项目计数？ [明智的GridView问题]

1 个答案: