Swift中ColorPicker单次选色却触发两次重复添加问题求助

问题根源分析 #

出现重复添加的核心原因通常有两个：

1. ColorPicker的实时更新特性：如果添加逻辑绑定在tempColor的onChange回调中，拖动颜色滑块时会多次触发值更新，导致中间过渡色被重复添加。
2. Color的默认相等判断不可靠：SwiftUI的Color结构体默认Equatable实现可能因底层颜色空间、精度差异，导致相同视觉颜色被判定为不同，或出现相反的误判。

具体修复方案 #

方案1：改用手动按钮触发添加（最可靠）

放弃自动响应颜色变化，让用户点击按钮确认添加，从根源避免多次触发。同时自定义颜色相等判断逻辑，解决误判问题：

// 给Color添加自定义相等判断扩展
extension Color {
    func toStableUIColor() -> UIColor {
        let uiColor = UIColor(self)
        var r: CGFloat = 0, g: CGFloat = 0, b: CGFloat = 0, a: CGFloat = 0
        uiColor.getRed(&r, green: &g, blue: &b, alpha: &a)
        // 保留固定精度，避免浮点误差导致的不等判断
        return UIColor(red: round(r*255)/255, green: round(g*255)/255, blue: round(b*255)/255, alpha: a)
    }
    
    func isSame(as other: Color) -> Bool {
        self.toStableUIColor() == other.toStableUIColor()
    }
}

// 视图实现
struct ColorPickerView: View {
    @State private var tempColor: Color = .white
    @State private var selectedColors: [Color] = []
    
    var body: some View {
        VStack(spacing: 20) {
            ColorPicker("选择颜色", selection: $tempColor)
                .padding()
            
            Button("添加到已选列表") {
                let targetColor = tempColor
                // 用自定义判断检查重复
                let isDuplicate = selectedColors.contains { $0.isSame(as: targetColor) }
                if !isDuplicate {
                    selectedColors.append(targetColor)
                }
            }
            .buttonStyle(.borderedProminent)
            
            // 展示已选颜色
            ScrollView(.horizontal) {
                HStack(spacing: 12) {
                    ForEach(selectedColors, id: \.self) { color in
                        RoundedRectangle(cornerRadius: 8)
                            .fill(color)
                            .frame(width: 60, height: 60)
                    }
                }
                .padding()
            }
        }
    }
}

方案2：若需自动添加，添加防抖处理

如果必须自动响应颜色选择完成事件，通过延迟防抖过滤掉拖动过程中的中间值：

struct AutoAddColorView: View {
    @State private var tempColor: Color = .white
    @State private var selectedColors: [Color] = []
    @State private var lastSelectedColor: Color?
    private let debounceDelay = 0.3 // 延迟0.3秒确认选择完成
    
    var body: some View {
        VStack(spacing: 20) {
            ColorPicker("选择颜色", selection: $tempColor)
                .padding()
                .onChange(of: tempColor) { newColor in
                    // 取消之前的延迟任务
                    lastSelectedColor = newColor
                    DispatchQueue.main.asyncAfter(deadline: .now() + debounceDelay) {
                        guard lastSelectedColor == newColor else { return }
                        let isDuplicate = selectedColors.contains { $0.isSame(as: newColor) }
                        if !isDuplicate {
                            selectedColors.append(newColor)
                        }
                    }
                }
            
            // 已选颜色展示同方案1
            ScrollView(.horizontal) {
                HStack(spacing: 12) {
                    ForEach(selectedColors, id: \.self) { color in
                        RoundedRectangle(cornerRadius: 8)
                            .fill(color)
                            .frame(width: 60, height: 60)
                    }
                }
                .padding()
            }
        }
    }
}

方案3：用ViewModel管理状态（大型项目推荐）

将颜色管理逻辑抽离到ObservableObject中，避免视图刷新导致的状态异常：

class ColorManager: ObservableObject {
    @Published var tempColor: Color = .white
    @Published var selectedColors: [Color] = []
    
    func addSelectedColor() {
        let targetColor = tempColor
        let isDuplicate = selectedColors.contains { $0.isSame(as: targetColor) }
        if !isDuplicate {
            selectedColors.append(targetColor)
        }
    }
}

struct ManagedColorView: View {
    @StateObject private var colorManager = ColorManager()
    
    var body: some View {
        VStack(spacing: 20) {
            ColorPicker("选择颜色", selection: $colorManager.tempColor)
                .padding()
            
            Button("添加到已选列表") {
                colorManager.addSelectedColor()
            }
            .buttonStyle(.borderedProminent)
            
            ScrollView(.horizontal) {
                HStack(spacing: 12) {
                    ForEach(colorManager.selectedColors, id: \.self) { color in
                        RoundedRectangle(cornerRadius: 8)
                            .fill(color)
                            .frame(width: 60, height: 60)
                    }
                }
                .padding()
            }
        }
    }
}

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