Flutter中如何用GridView.builder实现横向滚动的从上到下从左到右网格布局

默认横向滚动的GridView.builder会先按垂直方向（行）排列元素，再向水平方向延伸，这和你需要的先填满第一行再填第二行的顺序不符。你可以通过手动转换索引来解决这个问题，具体实现如下：

修改后的代码 #

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) {
      // 计算每行的元素数量（向上取整）
      final int cols = (times.length + 2 - 1) ~/ 2;
      // 转换索引，实现先左到右填满第一行，再填第二行
      final int originalIndex = (index ~/ 2) + (index % 2) * cols;
      return Container(
        color: Colors.blue,
        child: Center(child: Text(times[originalIndex].toString())),
      );
    },
    gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
      crossAxisCount: 2, // 固定2行
      crossAxisSpacing: 6,
      mainAxisSpacing: 6,
    ),
  ),
),

关键逻辑说明 #

1. 计算列数cols：
   用(元素总数 + 行数 - 1) ~/ 行数的方式向上取整，得到每行需要容纳的元素数量。比如7个元素、2行时，cols = (7+2-1)~/2 = 4，即第一行放4个，第二行放剩下的3个。

2. 索引转换公式：
   originalIndex = (index ~/ 2) + (index % 2) * cols

   • index ~/ 2：得到当前元素在水平方向的列位置
   • index % 2：得到当前元素所在的行（0=第一行，1=第二行）
   • 两者结合后，就能把GridView默认的先垂直后水平的顺序，转换成先水平后垂直的排列。

这样修改后，GridView就会按照你需要的顺序显示元素：第一行1、2、3、4，第二行5、6、7，同时保留横向滚动的功能。

内容的提问来源于stack exchange，提问作者Kdon