Question

API中的返回20条这样的记录

[ { ... “ p”：1.0 ... }， { ... “ p”：1.1 ... }， { ... “ p”：2.0 ... }， { “ p”：2.1 }， { “ p”：3.0 }， { “ p”：3.1 }， ]

1.0至1.1表示第一行，2.0至2.1表示第二行

我创建了Listview并使用了其他逻辑，但是我不知道如何在图像下方进行分组？

Widget createListView(BuildContext context, AsyncSnapshot snapshot) {
    List<Data> values = snapshot.data;
    return ListView.builder(
      padding: new EdgeInsets.only(top: 8.0, right: 0.0, left: 0.0),
      itemCount: getItemCounter(values),
      itemBuilder: (BuildContext context, int index) {
        return GridView.count(
          physics: ScrollPhysics(),
          shrinkWrap: true,
          crossAxisCount: 4,
          children: List.generate(2, (index) {
            return GridTile(
              child: GestureDetector(
                onTap: () => Navigator.push(
                    context,
                    MaterialPageRoute(
                        builder: (context) =>
                            assets2(values[index].i, widget._url))),
                child: Column(
                  children: [
                    Card(
                      child: Container(
                        decoration: BoxDecoration(
                            border: Border.all(
                                color: Colors.blueAccent, width: 1.5)),
                        child: Stack(
                          children: <Widget>[
                            SvgPicture.asset(
                              'assets/images/icon1.svg',
                              height: 50.0,
                            ),
                          ],
                        ),
                      ),
                    ),

                    Expanded(
                      child: Text(values[index].d, textAlign: TextAlign.center, style: TextStyle(fontSize: 10.0),),
                    ),
                  ],
                ),
              ),
            );
          }),
        );
      },
    );
    //    itemCount: 10,
  }

  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;

  }

我需要喜欢这个输出，

Answer 1

我在项目中做了类似的事情。

在CustomScrollView中使用SliverList，在GridView中使用primary: false

以下是您的示例专用的代码：

class M extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final data = [
      {"p": 1.0},
      {"p": 1.1},
      {"p": 2.0},
      {"p": 2.1},
      {"p": 3.0},
      {"p": 3.1},
    ];
    final listCount =
        data.map<double>((m) => m["p"]).reduce((a, b) => max(a, b)).floor();
    return CustomScrollView(
      slivers: <Widget>[
        SliverList(
          delegate: SliverChildBuilderDelegate(
            (context, i) {
              final items = data
                  .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: SliverGridDelegateWithMaxCrossAxisExtent(
                  maxCrossAxisExtent: 70.0,
                  childAspectRatio: 0.9,
                ),
                itemBuilder: (context, i) {
                  final item = items[i];
                  //TODO implement this method to build individual item
                  return _buildItem(item);
                },
              );
            },
            childCount: listCount,
          ),
        ),
      ],
    );
  }
}

编辑：添加了特定于问题的代码示例。代码美化了。

如何以分组方式创建ListView？

1 个答案: