在Flutter Flame框架的Canvas中绘制5×5网格失败，求解决方法

问题分析 #

你的代码存在两个核心问题：

• Cell组件的错误绘制逻辑：在render方法中额外绘制的矩形误用了组件的position坐标作为宽高，导致每个单元格大小混乱、互相覆盖。且RectangleComponent本身已实现矩形绘制，无需重复操作。
• 网格布局定位偏差：未考虑组件锚点设置，导致网格起始位置计算错误，无法形成整齐的排列。

修复后的代码 #

import 'dart:async';
import 'dart:ui';

import 'package:flame/components.dart';
import 'package:flutter/material.dart';
import 'package:learning_flame/my_game.dart';

class GameBoard extends PositionComponent with HasGameRef<MyGame> {
  @override
  FutureOr<void> onLoad() {
    super.onLoad();
    // 设置GameBoard锚点为中心，方便整体居中布局
    anchor = Anchor.center;
    // 将GameBoard定位到游戏画布中心
    position = gameRef.size / 2;

    const cellSize = 40.0;
    const cellSpacing = 10.0;
    // 计算5列网格的总宽度（含间距，最后一列无右侧间距）
    final gridTotalSize = (cellSize + cellSpacing) * 5 - cellSpacing;

    // 计算网格左上角的起始偏移，让整个网格在GameBoard中居中
    final startOffset = Vector2(-gridTotalSize / 2, -gridTotalSize / 2);

    for (int i = 0; i < 5; i++) {
      for (int j = 0; j < 5; j++) {
        add(
          Cell(
            position: startOffset +
                Vector2(
                  (cellSize + cellSpacing) * j,
                  (cellSize + cellSpacing) * i,
                ),
            size: Vector2.all(cellSize),
          ),
        );
      }
    }
  }
}

class Cell extends RectangleComponent {
  Cell({
    required super.position,
    required super.size,
  }) : super(
          anchor: Anchor.topLeft, // 改用左上角锚点，简化位置计算
          paint: Paint()..color = Colors.white, // 直接设置单元格颜色
        );

  // 移除错误的render重写，RectangleComponent会自动绘制正确的矩形
}

关键修改说明 #

• GameBoard调整：
  • 设置anchor = Anchor.center并将position设为画布中心，确保整个网格在屏幕居中显示。
  • 通过计算网格总尺寸，生成startOffset让内部单元格整体居中排列，避免偏移。
• Cell组件调整：
  • 移除错误的render方法，复用RectangleComponent自带的绘制逻辑。
  • 改用Anchor.topLeft作为单元格锚点，让位置计算更直观（基于左上角定位）。
  • 在构造函数中直接定义paint设置单元格颜色，无需额外绘制步骤。

修复后会在画布中心生成整齐的5×5白色网格，单元格大小统一、间距均匀。

内容的提问来源于stack exchange，提问作者dipansh