如何在Flutter中使用GridView.builder从左到右(从上到下)水平滚动布局网格单元格

fdx2calv 于 2023-02-16 发布在 Flutter

关注(0)|答案(1)|浏览(336)

我已经设置了一个GridView.builder水平滚动2行。
但是，我希望网格单元从左到右、从上到下构建（例如，第一行将构建1、2、3、4，然后在第二行构建其余的5、6、7）。
我尝试了一个Wrap小工具，但它没有滚动功能，似乎无法正常工作。
[！[示例图像][1]][1]

final times = [1, 2, 3, 4, 5, 6, 7];
...
  SizedBox(
              height: size.height * 0.25,
              child: GridView.builder(
                scrollDirection: Axis.horizontal,
                itemCount: times.length,
                itemBuilder: (context, index) => Container(
                  color: Colors.blue,
                  child: Center(child: Text(times.elementAt(index).toString())),
                ),
                gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                    crossAxisCount: 2, crossAxisSpacing: 6, mainAxisSpacing: 6),
              ),
            ),

  [1]: https://i.stack.imgur.com/4W81t.png

flutter

来源：https://stackoverflow.com/questions/75468543/how-to-layout-the-grid-cells-from-left-to-right-top-to-bottom-with-horizontal

1条答案

按热度按时间

suzh9iv81#

将scrollDirection更改为scrollDirection: Axis.vertical，并更新crossAxisCount: 4。
更新代码：

SizedBox(
              height: MediaQuery.of(context).size.height / 2,
              child: GridView.builder(
                scrollDirection: Axis.vertical,
                itemCount: 8,
                itemBuilder: (context, index) => Container(
                  color: Colors.blue,
                  child: SizedBox(child: Center(child: Text("Hey $index"))),
                ),
                gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
                    crossAxisCount: 4, crossAxisSpacing: 6, mainAxisSpacing: 6),
              ),
            ),

结果将为-

赞(0）回复(0）举报 2023-02-16

我来回答

如何在Flutter中使用GridView.builder从左到右(从上到下)水平滚动布局网格单元格

1条答案

相关问题

热门标签

最新问答