SwiftUI ForEach id参数作用及点击单卡片多卡翻转问题解析

1. ForEach 要求传入 id 参数的核心原因 #

ForEach 不是命令式编程中逐次执行的普通 for 循环，它是 SwiftUI 用来生成结构化视图列表的声明式组件，核心依赖 id 实现列表的高效差量更新：

• SwiftUI 不会在每次视图重绘时销毁重建所有列表子视图，而是通过 id 标记每个列表项的唯一身份，对比前后两次渲染的 id 集合，自动识别哪些项是新增、删除、移动的，仅更新变化部分，复用未变化项的视图与状态，保证长列表渲染性能。
• 如果没有稳定唯一的 id，SwiftUI 无法区分不同列表项的边界，会出现状态错乱、视图更新错位、动画异常等问题。
• 你代码中使用的 id: \.self 是将元素本身作为 id 值，这种写法仅在数组内所有元素全局唯一、不存在重复值时才是安全的。

2. 单张卡片点击触发两张同时翻转的根因 #

这个bug完全是id重复导致的状态绑定错乱：

• 你的数据源 emojis 数组存了两个相同的字符串 "a"，使用 id: \.self 时，两个卡片对应的id完全一致。
• CardView 中用来记录翻转状态的 @State var isFaceUp: Bool = true 是和视图身份（即ForEach中配置的id）绑定存储的，和遍历的数组位置无关。
• 当ForEach检测到两个列表项id完全相同时，SwiftUI会判定这两个位置是同一个视图，不会为第二个卡片创建独立的状态存储区，两个卡片会共享同一份isFaceUp状态。此时点击任意一张卡片修改状态，所有绑定该id的卡片都会同步更新，就出现了两张卡同时翻转的现象。

修复方案 #

• 正式开发中不要用可能重复的元素值作为id，给每个列表项设置全局唯一的标识（比如给数据模型加UUID字段），ForEach使用这个唯一标识作为id参数，不要使用\.self。
• 临时测试场景下可以把数组内的重复值替换为不同内容，比如将var emojis = ["a","a"]改为var emojis = ["a","b"]，此时两个元素的id唯一，两个卡片会各自持有独立的@State，点击单张卡片只会触发对应卡片翻转。

额外提示：你代码里的按钮逻辑写反了：标注为remove的按钮点击逻辑是emojiCount += 1（新增卡片），标注为add的按钮点击逻辑是emojiCount -= 1（移除卡片），后续调试时可以修正。

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