Flutter/Dart中向Map添加键值对时旧key被覆盖问题求解

你将统计点击次数的_passover Map定义在了单个图片组件的内部，每一个图片组件实例都会初始化专属的空Map对象，不同图片点击时操作的是各自独立的Map，自然只会保留当前点击图片的统计数据，不会留存其他图片的记录。

将统计用的_passover Map提到父级组件中统一持有，作为公共实例传递给所有图片组件，保证所有图片操作的是同一个Map对象即可。

示例代码如下：

父级组件（统一管理统计Map） #

class ImageGallery extends StatefulWidget {
  const ImageGallery({super.key});

  @override
  State<ImageGallery> createState() => _ImageGalleryState();
}

class _ImageGalleryState extends State<ImageGallery> {
  // 全局共享的统计Map，所有图片组件共用这一个实例
  final Map<String, int> _passover = {};

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        // 将共享Map传递给每个图片子组件
        ImageItem(image: 'images/redOnion.png', passover: _passover),
        ImageItem(image: 'images/milkRed.png', passover: _passover),
        ImageItem(image: 'images/milkBlue.png', passover: _passover),
        // 其余图片组件同理
      ],
    );
  }
}

图片子组件（接收共享Map做统计） #

class ImageItem extends StatelessWidget {
  final String image;
  // 接收父组件传递的共享Map
  final Map<String, int> passover;
  const ImageItem({super.key, required this.image, required this.passover});

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () {
        if (passover.containsKey(image)) {
          passover.update(image, (count) => count + 1);
        } else {
          passover.putIfAbsent(image, () => 1);
        }
        print(passover.entries);
      },
      child: Image.asset(image),
    );
  }
}

你可以用Dart的空判断运算符简化onTap逻辑，不需要手动判断key是否存在：

onTap: () {
  passover[image] = (passover[image] ?? 0) + 1;
  print(passover.entries);
},

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