Flutter Gridview 水平滚动

Question

我在 flutter web 上工作，我希望我的 gridview 滚动方向水平，但是当我添加 scrolldirection: Axix.horizo​​ntal 时，它旋转了 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.horizo​​ntal 的情况下运行良好。问题可能在于计算 gridCrossAxisCount/子项数时的逻辑。

当 Axis.horizo​​ntal 启用时，mainAxis 现在将是水平的，crossAxis 将是垂直的。

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