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

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
    );
  } 

外观：

我需要它看起来像什么：

Answer 1

您的

itemBuilder

一次只使用一个元素来生成

GridView

。因此，您为“Buffalo”组获得的是两个 GridView，每个只有一个元素。 我认为最简单的方法是在创建

GroupedListView

之前转换您的路线，例如（在伪代码中）：

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

Answer 2

你可以使用我写的库，它是在 CustomScrollView 中构建的。 https://pub.dev/packages/group_grid_view

或者您可以将 GridView 包装到 CustomView 中，然后使用 SliverGrid