SwiftUI中如何修改ContextMenu菜单项的颜色？

1. 实现Menu单击触发 #

默认SwiftUI Menu是长按弹出，要改成单击触发，可通过绑定状态变量手动控制菜单展示：

先添加状态变量：

@State private var isMenuPresented = false

然后修改Menu的初始化逻辑，配合点击手势触发：

Menu(isPresented: $isMenuPresented) {
    // 菜单项内容
} label: {
    // 原label布局
}
.onTapGesture {
    isMenuPresented.toggle()
}

这样点击label区域就会直接弹出菜单，替代默认的长按行为。

2. 修改菜单项图标颜色 #

直接给菜单项内的Image单独指定对应Tag的颜色即可，避免系统样式覆盖：

修改菜单项的Button部分：

Button {
    selectedTag = tag
} label: {
    HStack {
        Text(tag.name)
        Spacer()
        Image(systemName: "circle.fill")
            .foregroundColor(Tag.colors[tag.color])
    }
}
// 可选：若需文本同步变色，添加此行
// .tint(Tag.colors[tag.color])

这里将图标放在右侧对齐，直接绑定Tag对应的颜色，即可实现iOS日历App中不同选项对应不同颜色图标的效果。

完整修改代码 #

import SwiftUI
import SwiftData

struct TagPickerContextMenu: View {
    @Query var tags: [Tag]
    @Binding var selectedTag: Tag?
    @State private var isMenuPresented = false
    
    var body: some View {
        Menu(isPresented: $isMenuPresented) {
            // 直接遍历Tag对象，避免索引越界问题
            ForEach(tags) { tag in
                Button {
                    selectedTag = tag
                } label: {
                    HStack {
                        Text(tag.name)
                        Spacer()
                        Image(systemName: "circle.fill")
                            .foregroundColor(Tag.colors[tag.color])
                    }
                }
                // 可选：开启后文本会同步使用Tag颜色
                // .tint(Tag.colors[tag.color])
            }
        } label: {
            HStack {
                Text("Tag")
                    .frame(maxWidth: .infinity, alignment: .leading)
                    .foregroundColor(.primary)
                Image(systemName: "circle.fill")
                    .foregroundColor(Tag.colors[selectedTag?.color ?? 0])
                Text(selectedTag?.name ?? "Unknown")
                    .foregroundColor(Color.secondary)
                Image(systemName: "chevron.up.chevron.down")
                    .foregroundColor(Color.secondary)
            }
        }
        .onTapGesture {
            isMenuPresented.toggle()
        }
    }
}

额外说明 #

• 将原索引遍历改为直接遍历Tag对象，是SwiftData和SwiftUI的最佳实践，能避免索引越界风险，代码更简洁。
• .tint()修饰符可让菜单项文本同步使用图标颜色，根据需求选择是否开启。

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