如何在分组列表中创建网格

Question

我是 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,
                          shrinkWrap: true,
                          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

Answer 1

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

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