macOS端如何在Popover中显示ColorPicker？

默认的ColorPicker在macOS中会以独立窗口形式打开，和应用界面脱节。要实现类似Preview应用的Popover弹窗效果，可通过Button结合popover修饰符包裹ColorPicker，具体实现如下：

完整代码示例 #

import SwiftUI

struct ContentView: View {
    @State private var selectedColor: Color = .blue
    @State private var showColorPicker = false
    
    var body: some View {
        Button(action: {
            showColorPicker.toggle()
        }) {
            // 用系统图标作为触发按钮，也可替换为自定义视图
            Image(systemName: "paintpalette")
                .font(.title)
                .foregroundColor(selectedColor)
        }
        .popover(isPresented: $showColorPicker, arrowEdge: .top) {
            ColorPicker("", selection: $selectedColor)
                .padding(16) // 增加内边距优化布局
                .frame(minWidth: 200) // 设置最小宽度避免弹窗过窄
        }
    }
}

关键说明 #

• 用@State变量showColorPicker控制Popover的显示与隐藏
• popover修饰符可指定箭头方向（示例为.top），让弹窗与触发按钮位置更贴合
• 给ColorPicker添加padding和frame能优化弹窗视觉效果，避免控件拥挤
• 按钮可根据选中颜色动态更新图标颜色，提升交互反馈

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