如何在macOS SwiftUI中为Picker或Menu添加自定义视图？

你想要实现的效果示例：

在macOS上，SwiftUI的默认Picker/Menu样式会强制覆盖自定义内容，要突破这个限制，核心是绕过系统默认样式的约束，以下是两种实用实现方案：

方法一：自定义PickerStyle完全接管Picker外观 #

通过自定义PickerStyle，可以完全掌控Picker的显示逻辑和交互，自由插入自定义视图。

带颜色预览的Picker示例代码 #

struct CustomColorPickerStyle: PickerStyle {
    func makeBody(configuration: Configuration) -> some View {
        Button {
            configuration.isSelected.toggle()
        } label: {
            HStack {
                // 自定义颜色预览圆点
                Circle()
                    .fill((configuration.selectedLabel as? Color) ?? .gray)
                    .frame(width: 20, height: 20)
                // 保留Picker原标签
                configuration.label
            }
        }
        .popover(isPresented: $configuration.isSelected) {
            VStack(spacing: 12) {
                ForEach(configuration.options) { option in
                    Button {
                        configuration.select(option)
                        configuration.isSelected = false
                    } label: {
                        HStack {
                            Circle()
                                .fill(option.label as! Color)
                                .frame(width: 20, height: 20)
                            option.label
                        }
                    }
                }
            }
            .padding()
        }
    }
}

// 使用方式
@State private var selectedColor: Color = .red

Picker("选择颜色", selection: $selectedColor) {
    Color.red.tag(Color.red)
    Color.blue.tag(Color.blue)
    Color.green.tag(Color.green)
}
.pickerStyle(CustomColorPickerStyle())

方法二：用Button+Popover模拟自定义Menu #

原生Menu的样式限制较多，直接用Button搭配popover，可以自由组合自定义视图和菜单选项。

带附加信息的Menu示例代码 #

@State private var isMenuOpen = false
@State private var selectedItemCount = 3

Button {
    isMenuOpen.toggle()
} label: {
    HStack(spacing: 6) {
        Text("操作菜单")
        // 自定义附加信息
        Text("(已选\(selectedItemCount)项)")
            .font(.caption)
            .foregroundColor(.secondary)
        Image(systemName: "chevron.down")
            .font(.caption)
    }
}
.popover(isPresented: $isMenuOpen) {
    VStack(alignment: .leading, spacing: 8) {
        Button("复制选中项") {
            // 执行复制逻辑
            isMenuOpen = false
        }
        Button("删除选中项") {
            // 执行删除逻辑
            isMenuOpen = false
        }
        Divider()
        // 自定义附加说明视图
        Text("删除后无法恢复")
            .font(.caption)
            .foregroundColor(.secondary)
    }
    .padding()
    .frame(minWidth: 180)
}

关键注意事项 #

• 自定义样式时，需要手动处理选中状态切换、选项交互逻辑，尽量贴合原生组件的操作体验
• 若需要保留Picker的下拉弹出特性，优先用popover承载自定义选项列表，兼容性更好
• 测试时注意适配不同macOS版本，部分API在旧系统中可能不支持

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