SwiftUI技术问询：如何监听ColorPicker的点击事件？

这个问题确实挺头疼的——SwiftUI自带的ColorPicker是封装好的系统控件，直接加手势很容易和它的默认交互冲突，导致系统颜色选择器弹不出来。我这里有个非常可靠的解决方案，用UIKit的UIColorWell来包装成SwiftUI控件，既能保留系统的颜色选择功能，又能精准监听点击事件：

方案一：封装UIColorWell为SwiftUI控件 #

通过UIViewRepresentable把UIKit的UIColorWell包装成SwiftUI可用的视图，这样我们就能直接监听它的点击事件，同时不影响系统弹窗的弹出：

import SwiftUI

struct CustomTapableColorPicker: UIViewRepresentable {
    @Binding var selectedColor: Color
    // 点击回调闭包
    var onTap: () -> Void
    
    func makeUIView(context: Context) -> UIColorWell {
        let colorWell = UIColorWell()
        colorWell.selectedColor = UIColor(selectedColor)
        // 监听点击事件
        colorWell.addTarget(context.coordinator, action: #selector(Coordinator.onColorWellTap), for: .touchUpInside)
        return colorWell
    }
    
    func updateUIView(_ uiView: UIColorWell, context: Context) {
        // 同步颜色状态
        uiView.selectedColor = UIColor(selectedColor)
    }
    
    func makeCoordinator() -> Coordinator {
        Coordinator(self)
    }
    
    class Coordinator: NSObject {
        let parent: CustomTapableColorPicker
        
        init(_ parent: CustomTapableColorPicker) {
            self.parent = parent
        }
        
        @objc func onColorWellTap() {
            // 触发父视图的点击回调
            parent.onTap()
        }
    }
}

// 使用示例
struct ContentView: View {
    @State private var currentColor = Color.red
    
    var body: some View {
        VStack(spacing: 20) {
            Text("当前颜色:")
                .foregroundColor(currentColor)
            
            CustomTapableColorPicker(selectedColor: $currentColor) {
                print("ColorPicker被点击了！")
                // 在这里执行你需要的操作
            }
        }
        .padding()
    }
}

为什么之前的方法不行？ #

你尝试的onTapGesture、simultaneousGesture以及ZStack包裹的方式，本质上都是和ColorPicker内部的系统手势产生了冲突——SwiftUI的ColorPicker内部已经有自己的手势处理逻辑来触发弹窗，外部添加的手势会干扰这个流程，要么抢了事件导致弹窗不弹出，要么根本监听不到点击。

而UIKit的UIColorWell允许我们直接监听touchUpInside事件，这个事件会在用户点击控件时触发，同时不会影响系统颜色选择器的弹出逻辑，完美解决了你的需求。

备选方案：利用Notification监听弹窗弹出（不推荐） #

如果你不想用UIKit包装，也可以尝试监听系统通知来判断颜色选择器是否弹出，但这个方法依赖系统未公开的通知，不同iOS版本可能不稳定，所以只作为备选：

struct ContentView: View {
    @State private var color = Color.red
    
    var body: some View {
        ColorPicker("Color:", selection: $color)
            .onAppear {
                NotificationCenter.default.addObserver(forName: NSNotification.Name("UIColorWellDidPresentColorPicker"), object: nil, queue: .main) { _ in
                    print("颜色选择器弹出了")
                }
            }
            .onDisappear {
                NotificationCenter.default.removeObserver(self)
            }
    }
}

注意：这个通知是未公开的API，可能在未来的iOS版本中失效，所以优先推荐第一个方案。

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