Flutter网格视图水平滚动

Question

我正在开发Flutter Web，想要将GridView的滚动方向设置为水平方向。但是当我添加了scrolldirection: Axis.horizontal后，它会旋转GridView。我知道可以使用ListView来使它在Web上适应响应式布局，但需要写很多代码。我只想让GridView根据屏幕宽度自动管理其crossAxisCount以实现响应式设计。所以，请帮我解决一下如何使GridView的滚动方向为水平方向。谢谢。

 int gridCrossAxisCount;
    if (size > 1600) {
      gridCrossAxisCount = 4;
    } else if (size > 1300) {
      gridCrossAxisCount = 3;
    } else if (size > 800) {
      gridCrossAxisCount = 2;
    } else {
      gridCrossAxisCount = 1;
    }

Container(
        width: double.infinity,
        height: 300,
        child: GridView.count(
          // scrollDirection: Axis.horizontal,
          physics: ScrollPhysics(),
          shrinkWrap: true,
          primary: true,
          padding: EdgeInsets.only(top: 15.0),
          crossAxisCount: gridCrossAxisCount, //Screensize grid count
          childAspectRatio: 0.60, //1.0
          mainAxisSpacing: 0.2, //1.0
          crossAxisSpacing: 4.0, //1.0
          children: [
            Container(
              height: 200,
              width: 200,
              color: Colors.green,
            ),
            Container(
              height: 200,
              width: 200,
              color: Colors.red,
            ),
            Container(
              height: 200,
              width: 200,
              color: Colors.orange,
            ),
            Container(
              height: 200,
              width: 200,
              color: Colors.indigo,
            ),
          ],
        ),
      ),

- Raine Dale Holgado

Answer 1

当GridView旋转时，您能否包含截图？

我认为您的代码在Axis.horizontal模式下运行良好。问题可能在于计算gridCrossAxisCount/子项数量的逻辑上。

当Axis.horizontal模式打开时，主轴现在将是水平方向，而横轴将是垂直方向。

因此，如果axisCount为1，则所有项目将仅显示在1行中；但如果为4，则它们将在4行中显示，在您的示例中有4个子项并不足以导致溢出到视口之外并启用滚动。

- Bach

---

我以为主轴和交叉轴不会改变。现在问题解决了，谢谢。 - Raine Dale Holgado