Flutter中如何创建超屏幕的可横竖滚动20×20棋盘？

你用GridView.builder设置水平滚动后没法垂直滚动的问题，核心解决思路是用嵌套的滚动容器，把水平方向的棋盘包裹在垂直滚动容器中，同时确保棋盘本身有足够尺寸撑开滚动范围，这样就能实现横竖甚至对角线方向的自由滚动。

具体实现步骤 #

• 外层用SingleChildScrollView设置垂直滚动，负责上下方向的滚动。
• 内层再嵌套一个SingleChildScrollView设置水平滚动，负责左右方向的滚动。
• 内层滚动组件中放置固定尺寸的容器（对应20×20棋盘的总宽高），再在容器内构建棋盘格子。

完整代码示例 #

class ChessBoard extends StatelessWidget {
  // 固定棋盘尺寸为20×20
  static const int boardSize = 20;
  // 单个格子的大小，可根据需求调整
  static const double tileSize = 40.0;

  @override
  Widget build(BuildContext context) {
    return SingleChildScrollView(
      scrollDirection: Axis.vertical,
      child: SingleChildScrollView(
        scrollDirection: Axis.horizontal,
        child: Container(
          // 设置棋盘总尺寸：格子数量×单个格子大小
          width: boardSize * tileSize,
          height: boardSize * tileSize,
          child: GridView.builder(
            // 禁用GridView自身滚动，避免和外层滚动容器冲突
            physics: const NeverScrollableScrollPhysics(),
            gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
              crossAxisCount: boardSize,
              childAspectRatio: 1.0, // 保证格子为正方形
            ),
            itemCount: boardSize * boardSize,
            itemBuilder: (context, index) {
              // 计算当前格子的行、列位置
              int row = index ~/ boardSize;
              int col = index % boardSize;
              // 交替颜色实现棋盘视觉效果
              bool isDarkTile = (row + col) % 2 == 1;
              return Container(
                color: isDarkTile ? Colors.grey[800] : Colors.grey[200],
                child: Center(
                  child: Text('$row,$col'),
                ),
              );
            },
          ),
        ),
      ),
    );
  }
}

关键注意事项 #

• 必须给GridView添加NeverScrollableScrollPhysics()，否则它自身的滚动逻辑会和外层滚动容器冲突，导致滚动异常。
• 内层的Container必须设置固定宽高，这样滚动容器才能识别到内容超出屏幕范围，从而触发滚动效果。
• 这种嵌套方式天然支持对角线滚动：拖动时同时触发水平和垂直滚动，就能实现斜向滚动的需求。

内容的提问来源于stack exchange，提问作者Mp. Dev