Flutter/Flame中如何让精灵按独立方向逐块移动？

你的问题核心在于移动函数没有等待当前移动完成就执行了下一个，导致多个MoveByEffect同时作用在角色上，位移向量叠加后形成斜线移动，而非串行的逐块移动。以下是具体解决方法：

修改移动函数，等待移动完成 #

原来的移动函数只是添加Effect就返回Future，没有真正等待移动结束。我们用Completer监听Effect完成事件，确保Future在移动结束后才完成：

// 向前移动一格，1秒完成，移动结束后Future才会resolve
Future moveForward(Character character) {
  final completer = Completer();
  final effect = MoveByEffect(
    Vector2(0, -90),
    EffectController(duration: 1),
    onComplete: () => completer.complete(),
  );
  character.add(effect);
  return completer.future;
}

// 向左移动一格，同理
Future moveLeft(Character character) {
  final completer = Completer();
  final effect = MoveByEffect(
    Vector2(-90, 0),
    EffectController(duration: 1),
    onComplete: () => completer.complete(),
  );
  character.add(effect);
  return completer.future;
}

串行执行移动序列 #

遍历你的方向列表，用await逐个执行移动函数，确保上一步移动完成后再开始下一步：

// 传入角色和移动指令列表，按顺序执行
Future runMoveSequence(Character character, List<Future Function(Character)> moveList) async {
  for (final move in moveList) {
    await move(character);
  }
}

调用示例：

// 先向前再向左的执行逻辑
runMoveSequence(character, [moveForward, moveLeft]);

补充说明 #

之前出现的"弧线"其实是两个位移向量叠加后的斜线移动——因为两个MoveByEffect同时修改角色位置，x和y方向的位移同时进行，最终走的是两点间的直线，而非先完成x方向再完成y方向的逐块路径。通过等待每个Effect完成，就能让角色严格按顺序走完每一段路径。

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