关于Flame中PositionComponent锚点参数的困惑求助

问题原因 #

在Flame 1.x版本（包括你使用的1.6.0）中，PositionComponent的anchor属性仅影响自身在父级坐标系中的定位，子组件的position始终是相对于父组件的左上角原点，而非父组件的anchor点。这就是为什么你设置子组件position: Vector2(0, -50)后，它会出现在父组件左上角上方50像素处（如你提供的截图所示），而非中心上方。

你参考的官方文档示例大概率基于Flame 2.x版本编写——Flame 2.x重构了组件定位逻辑，子组件的position默认相对于父组件的anchor点，因此示例代码可以直接生效。

解决方法 #

针对你的Flame 1.6.0环境，有两种可行方案：

方案1：手动计算子组件位置

根据父组件的尺寸，计算出父组件中心在自身坐标系中的偏移，再调整子组件的position：

final parent = RectangleComponent(
  position: Vector2(100, 100),
  size: Vector2(100, 100),
  anchor: Anchor.center,
)..setColor(Colors.blue);
add(parent);

// 父组件中心在自身坐标系中的位置是(size.x/2, size.y/2)
// 要让子组件在中心上方50像素，Y坐标为 size.y/2 - 50
final child = RectangleComponent(
  position: Vector2(parent.size.x / 2, parent.size.y / 2 - 50),
  size: Vector2(10, 10),
)..setColor(Colors.yellow);
parent.add(child);

方案2：升级Flame到2.x版本

如果项目允许，升级Flame到2.x及以上版本（当前稳定版已更新至10.x+），此时子组件的position会默认相对于父组件的anchor点，你最初参考的官方示例代码即可直接生效。

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