Flutter Gridview 水平滚动

Question

我在 flutter web 上工作，我希望我的 gridview 滚动方向水平，但是当我添加 scrolldirection: Axix.horizontal 它旋转了 gridview。我知道可以使用 ListView 使这变得简单，但它需要太多代码才能使其在网络上响应。我只希望 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,
            ),
          ],
        ),
      ),

Answer 1

能否附上 GridView 旋转时的屏幕截图？

我认为您的代码在 Axis.horizontal 开启时运行良好。问题可能出在计算 gridCrossAxisCount/ child 项数时的逻辑上。

当Axis.horizontal打开时，mainAxis现在是水平的，crossAxis是垂直的。

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

Flutter Gridview 水平滚动

Flutter Gridview scrolling horizontal

flutter

flutter-layout

flutter-web