时间戳

首页 > 解决方案 > Flutter Gridview水平滚动

flutter - Flutter Gridview水平滚动

问题描述

我正在开发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,
            ),
          ],
        ),
      ),

标签： flutterflutter-layoutflutter-web

解决方案

您可以在 GridView 旋转时包含屏幕截图吗？

我认为您的代码在 Axis.horizo​​ntal 上运行良好。问题可能出在计算 gridCrossAxisCount/ 子项数量时的逻辑。

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

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

推荐阅读