如何在分组列表中制作网格

问题描述

我对 flutter 还很陌生，我正在尝试使用 GroupedListView 小部件 (package) 创建一个分组列表视图，但是，我希望组中的项目显示为网格。当我尝试进行网格视图时，卡片的大小按照我想要的方式进行，但每张都出现在另一行，而当我执行常规列表时，大小会发生巨大变化。如何让项目出现在同一行？

我当前的代码：

Widget _buildTeam(context) {
    return GroupedListView<dynamic,String>(
        physics: ScrollPhysics(),shrinkWrap: true,elements: routes == null ? [] : routes,groupBy: (element) => element['locationName'],groupSeparatorBuilder: (String value) => Column(
          children: [
      Padding(
      padding: const EdgeInsets.only(right: 16.0,left: 16.0,bottom: 25),child: Container(
        height: 55.0,color: Colors.grey[800],child: Row(
          mainAxisAlignment: MainAxisAlignment.center,children: [
            Text(value.toUpperCase(),style: TextStyle(
                color: Colors.grey[200],fontSize: 20.0
            ),)
          ],),]
      ),itemBuilder: (context,element) => Padding(
        padding: const EdgeInsets.only(left: 35.0,right: 35.0),child: GridView.count(
                          controller: _controller,physics: ScrollPhysics(),childAspectRatio: 0.75/ 1.4,padding: EdgeInsets.zero,scrollDirection: Axis.vertical,mainAxisSpacing: 1.0,crossAxisSpacing: 20.0,crossAxisCount: 2,children: List.generate(1,(index) {
                            return Padding(
                              padding: const EdgeInsets.only(bottom: 25.0),child: TeamCard1(element["driver"],element["helper"],element["lastUpdate"]),);
                          }),order: GroupedListOrder.ASC
    );
  } 

它的样子： Screenshot1

我需要它的样子： Screenshot2

解决方法

您的 itemBuilder 一次仅使用一个元素来生成 GridView。因此，您为“Buffalo”组获得的是两个 GridView，每个只有一个元素。 我认为最简单的方法是在创建 GroupedListView 之前转换您的路线，例如（在伪代码中）：

List<GridView> routeGridsByLocation = groupBy(routes,location).map((routesForThisLocation) => GridView(...));