Flame v1.6.0中Flutter ProgressBar接收Flame值变更通知的正确方式

在Flame v1.0+版本中，overlays.notifyListeners()已被移除，推荐结合Flutter原生的状态管理机制来实现Flame值变化时更新StatelessWidget组件。以下是具体实现方案：

核心思路 #

因为StatelessWidget自身不维护可变状态，我们需要在Flame游戏逻辑中维护一个可监听的进度值，然后让ProgressBar通过Flutter的状态监听组件（如AnimatedBuilder）响应值的变化，自动触发重建。

步骤1：在Flame游戏类中维护可监听进度值 #

使用ValueNotifier（轻量单值监听）来管理进度，游戏逻辑更新时直接修改其值即可触发通知：

class MyGame extends FlameGame {
  // 初始化进度为0.0
  final ValueNotifier<double> progressNotifier = ValueNotifier(0.0);

  // 更新进度的方法，可在游戏逻辑中调用（比如敌人被击败、任务推进时）
  void updateProgress(double newProgress) {
    progressNotifier.value = newProgress.clamp(0.0, 1.0); // 限制在0-1区间
  }

  @override
  void update(double dt) {
    // 示例：模拟进度随时间增长
    if (progressNotifier.value < 1.0) {
      updateProgress(progressNotifier.value + 0.1 * dt);
    }
    super.update(dt);
  }
}

步骤2：实现StatelessWidget类型的ProgressBar #

通过AnimatedBuilder监听ValueNotifier的变化，无需将组件改为StatefulWidget：

class ProgressBar extends StatelessWidget {
  final ValueNotifier<double> progressNotifier;

  const ProgressBar({super.key, required this.progressNotifier});

  @override
  Widget build(BuildContext context) {
    return AnimatedBuilder(
      animation: progressNotifier,
      builder: (context, _) {
        return LinearProgressIndicator(
          value: progressNotifier.value,
          backgroundColor: Colors.grey.shade300,
          valueColor: const AlwaysStoppedAnimation<Color>(Colors.blueAccent),
        );
      },
    );
  }
}

步骤3：在Widget树中整合游戏与ProgressBar #

将游戏实例的progressNotifier传递给ProgressBar，并通过Stack将组件叠加在游戏视图上：

class GamePage extends StatelessWidget {
  final MyGame _game = MyGame();

  GamePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: [
          GameWidget(game: _game),
          // 将进度条固定在顶部
          Positioned(
            top: 40,
            left: 24,
            right: 24,
            child: ProgressBar(progressNotifier: _game.progressNotifier),
          ),
        ],
      ),
    );
  }
}

扩展方案：复杂状态管理 #

如果需要监听多个游戏状态（如生命值、金币数），可以改用ChangeNotifier来封装一组状态：

class GameState extends ChangeNotifier {
  double _progress = 0.0;
  int _coins = 0;

  double get progress => _progress;
  int get coins => _coins;

  void updateProgress(double value) {
    _progress = value.clamp(0.0, 1.0);
    notifyListeners();
  }

  void addCoins(int amount) {
    _coins += amount;
    notifyListeners();
  }
}

// 在游戏类中初始化
class MyGame extends FlameGame {
  final GameState gameState = GameState();

  @override
  void update(double dt) {
    if (gameState.progress < 1.0) {
      gameState.updateProgress(gameState.progress + 0.1 * dt);
    }
    super.update(dt);
  }
}

此时ProgressBar可以用Consumer<GameState>（需依赖provider包）或AnimatedBuilder监听状态变化。

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