SwiftUI菜单中Image的.opacity()修饰符为何无法正常生效？

问题重现 #

以下代码中，试图通过.opacity()修饰符根据选中状态显示/隐藏对勾图标，但运行时所有菜单项都会显示对勾；仅当用if条件包裹Image并移除.opacity()时，功能才正常工作，该问题在预览、模拟器及真机上均复现：

struct ContentView: View {
    let options = [1, 2, 3, 4, 5]
    @State private var selectedOption = 1
    var body: some View {
        List {
            Menu {
                ForEach(options, id: \.self) {option in
                    Button {
                        selectedOption = option
                    } label: {
                        HStack {
                            Text("\(option)")
                            Spacer()
                            Image(systemName: "checkmark")
                                .opacity(option == selectedOption ? 1 : 0)
                        }
                    }
                }
            } label: {
                Text("Selected option")
                Spacer()
                Text("\(selectedOption)")
            }
        }
    }
}

原因分析 #

这是SwiftUI Menu组件的视图渲染机制特性导致：

• Menu展开时会复用内部列表项的视图结构，当使用.opacity()时，Image始终存在于视图层级中，SwiftUI无法正确区分不同选项的状态绑定关系，导致状态判断逻辑失效。
• 而用if条件包裹Image时，视图是条件性添加/移除的，每个选项的视图层级会根据状态动态变化，SwiftUI能准确跟踪每个选项的选中状态，从而正常显示/隐藏对勾。

解决方案 #

方案1：用条件语句控制视图存在性（推荐） #

直接通过if判断选中状态，仅在选项被选中时渲染Image：

Button {
    selectedOption = option
} label: {
    HStack {
        Text("\(option)")
        Spacer()
        if option == selectedOption {
            Image(systemName: "checkmark")
        }
    }
}

方案2：为视图添加唯一标识强制更新 #

给包含Image的HStack添加.id(option)，让SwiftUI识别每个选项视图的唯一性，确保状态变化时正确更新opacity：

Button {
    selectedOption = option
} label: {
    HStack {
        Text("\(option)")
        Spacer()
        Image(systemName: "checkmark")
            .opacity(option == selectedOption ? 1 : 0)
    }
    .id(option) // 添加唯一标识
}

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