SwiftUI ForEach中点击SF Symbol仅当前选中项变蓝的问题

两个版本的实现都存在状态设计错误，无法满足单选交互要求：

• 父子视图拆分版本：每个子视图IconsSubView都通过@State维护了独立的选中布尔值，子视图之间状态完全隔离。点击单个图标时只会修改当前子视图自身的选中状态，无法通知其他子视图重置选中态，因此所有点击过的图标都会持续保持蓝色。
• 单视图合并版本：仅用一个全局布尔值isSelectedIcon记录选中状态，网格内所有图标的前景色都绑定这同一个布尔值。点击任意图标触发布尔值切换后，所有图标会同步读取同一个状态值，因此会同时变成蓝色，无法区分单个选中项。

单选需求的核心是保证全局只有一份选中状态数据源，因此需要把选中状态上移到父视图统一管理，子视图只负责展示和响应点击，不持有私有选中状态。

修复后的父视图代码 #

import SwiftUI

struct IconsView: View {
    // 统一存储当前选中的图标名，初始值为nil表示无选中项
    @State private var selectedIcon: String? = nil
    
    private let columns = [ GridItem(.flexible()), GridItem(.flexible()), GridItem(.flexible()) ]
    private let icons = [ "a.circle", "b.circle", "c.circle", "d.circle", "e.circle", "f.circle", "g.circle", "h.circle", "i.circle" ]
    
    var body: some View {
        LazyVGrid(columns: columns) {
            ForEach(icons, id: \.self) { item in
                IconsSubView(
                    strIcon: item,
                    // 传入当前项的选中状态
                    isSelected: selectedIcon == item,
                    // 点击后更新全局选中项为当前图标
                    onTap: { selectedIcon = item }
                )
            }
        }
    }
}

修复后的子视图代码 #

import SwiftUI

struct IconsSubView: View {
    let strIcon: String
    // 子视图不持有私有状态，所有状态由父视图注入
    let isSelected: Bool
    let onTap: () -> Void
    
    var body: some View {
        Image(systemName: strIcon)
            .foregroundColor(isSelected ? .blue : .primary)
            .font(.system(size: 50))
            .onTapGesture(perform: onTap)
    }
}

• 父视图直接存储当前选中的图标名称而非布尔值，从根源避免「所有项共用一个开关」的问题，保证任意时刻最多只有一个图标处于选中状态。
• 子视图改为无状态展示组件，颜色完全由父视图传入的参数控制，点击动作通过回调通知父视图更新状态，避免子视图私有状态隔离导致的不同步问题。
• 父视图状态更新后SwiftUI会自动触发视图重绘，自动完成旧选中项恢复原色、新选中项变蓝的效果，无需手动遍历重置其他项的状态。

可选扩展：如果需要支持「点击已选中图标取消选中」的效果，只需要把父视图中onTap的逻辑替换为如下代码即可：

onTap: {
    selectedIcon = selectedIcon == item ? nil : item
}

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