Flutter飞镖游戏中如何标识并修改特定PlayerCard的玩家分数？

核心思路 #

用Map<String, int>在MyAppState中管理每个玩家的分数，给每个PlayerCard传递玩家标识（名称/ID）和分数更新回调，点击计分按钮时通过回调通知父组件修改对应玩家的分数，再通过setState()触发UI刷新。

具体实现步骤 #

1. 在MyAppState中定义玩家分数Map #

初始化时给每个玩家设置初始分301：

class MyAppState extends State<MyApp> {
  // 用玩家名称作为key，分数作为value
  Map<String, int> playerScores = {
    '玩家1': 301,
    '玩家2': 301,
    '玩家3': 301,
  };

  // 定义更新分数的方法：接收玩家名和要扣除的分数
  void updatePlayerScore(String playerName, int scoreToDeduct) {
    setState(() {
      if (playerScores.containsKey(playerName)) {
        // 确保分数不会变成负数（符合飞镖游戏规则）
        playerScores[playerName] =
            max(playerScores[playerName]! - scoreToDeduct, 0);
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    // ... 其他代码
  }
}

2. 改造PlayerCard组件 #

让它接收玩家名、当前分数，以及点击计分按钮的回调函数：

class PlayerCard extends StatelessWidget {
  final String playerName;
  final int currentScore;
  final Function(String, int) onScoreDeduct;

  const PlayerCard({
    super.key,
    required this.playerName,
    required this.currentScore,
    required this.onScoreDeduct,
  });

  @override
  Widget build(BuildContext context) {
    return Card(
      child: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          children: [
            Text(playerName),
            Text('当前分数: $currentScore'),
            // 示例：点击按钮扣除10分，可根据实际游戏逻辑修改分数值
            ElevatedButton(
              onPressed: () => onScoreDeduct(playerName, 10),
              child: const Text('扣除10分'),
            ),
          ],
        ),
      ),
    );
  }
}

3. 循环生成带标识的PlayerCard #

遍历playerScores的keys，给每个PlayerCard传递对应的玩家名、分数和回调：

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(title: const Text('飞镖游戏')),
    body: Column(
      children: playerScores.keys.map((playerName) {
        return PlayerCard(
          playerName: playerName,
          currentScore: playerScores[playerName]!,
          onScoreDeduct: updatePlayerScore,
        );
      }).toList(),
    ),
  );
}

关键说明 #

• 每个PlayerCard通过playerName作为唯一标识，确保点击按钮时能精准定位到要修改的玩家分数。
• 所有状态统一在MyAppState中管理，避免全局变量的混乱，符合Flutter状态管理的最佳实践。
• 调用setState()更新Map后，Flutter会自动重新构建所有依赖该Map的PlayerCard，实现分数的实时刷新。

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