如何基于优先级Picker选择动态修改两个Picker的背景色？

安全阿岳

2026-6-26

动态修改Segmented Picker背景色解决方案

问题描述

我有两个Segmented Picker，一个用于优先级选择，另一个用于日期维度选择。希望根据优先级Picker的选中值，动态修改两个Picker的背景色，例如优先级为高时Picker背景设为红色，中等时设为橙色等。目前我只能通过初始化器手动设置Picker的背景色，尝试过在init中添加条件判断、自定义Section和Picker等方式，但均未成功，不确定该需求是否可行。

原代码如下：

struct AddWunschSheetView: View {
    
    @State private var titelTextField: String = ""
    @State private var kostenTextField: String = ""
    
    @State private var sliderValue = 1.0
    @State private var amount = 0.5
    
    @State private var prioPicker = 1
    @State private var selection = 1
    
    @Environment(\.dismiss) var dismiss
    
    init() {
        UISegmentedControl.appearance().selectedSegmentTintColor = UIColor.red
        
        let attributes: [NSAttributedString.Key:Any] = [
            .foregroundColor: UIColor.white
        ]
        UISegmentedControl.appearance().setTitleTextAttributes(attributes, for: .selected)
    }
    
    var body: some View {
        NavigationStack {
            Form {
                Section("Artikeldetails") {
                    TextField("", text: $titelTextField, prompt: Text("Titel des Artikels"))
                }
                
                Section("Priority") {
                    Picker("", selection: $prioPicker) {
                        Text("Dringend").tag(1)
                        Text("Hoch").tag(2)
                        Text("Mittel").tag(3)
                        Text("Niedrig").tag(4)
                    }
                    .pickerStyle(.segmented)
                }
                
                Picker("", selection: $selection) {
                    Text("Tag").tag(1)
                    Text("Woche").tag(2)
                    Text("Monat").tag(3)
                }
                .pickerStyle(.segmented)
                
                if selection == 1 {
                    Slider(value: $sliderValue, in: 1...31, step: 1.0, minimumValueLabel: Text("1"), maximumValueLabel: Text("31"), label: {})
                        .padding(.horizontal)
                } else if selection == 2 {
                    Slider(value: $sliderValue, in: 1...52, step: 1.0, minimumValueLabel: Text("1"), maximumValueLabel: Text("52"), label: {})
                        .padding(.horizontal)
                } else if selection == 3 {
                    Slider(value: $sliderValue, in: 1...12, step: 1.0, minimumValueLabel: Text("1"), maximumValueLabel: Text("12"), label: {})
                        .padding(.horizontal)
                }

                HStack {
                    Spacer()
                    Text( String(format: "%.0f", sliderValue))
                    if selection == 1 {
                        Text("Tage bis zum Ereigniss")
                    } else if selection == 2 {
                        Text("Wochen bis zum Ereigniss")
                    } else if selection == 3 {
                        Text("Monate bis zum Ereigniss")
                    }
                    Spacer()
                }
                
                HStack {
                    VStack {
                        Text("Kosten")
                            .bold()
                        TextField("", text: $kostenTextField, prompt: Text("0€"))
                            .keyboardType(.numberPad)
                            .padding(.top)
                    }
                    Spacer()
                    
                    if prioPicker == 1 {
                        Gauge(value: amount) {
                            Text("50%")
                        }
                        .gaugeStyle(.accessoryCircularCapacity)
                        .tint(.red)
                    } else if prioPicker == 2 {
                        Gauge(value: amount) {
                            Text("50%")
                        }
                        .gaugeStyle(.accessoryCircularCapacity)
                        .tint(.orange)
                    } else if prioPicker == 3 {
                        Gauge(value: amount) {
                            Text("50%")
                        }
                        .gaugeStyle(.accessoryCircularCapacity)
                        .tint(.blue)
                    } else if prioPicker == 4 {
                        Gauge(value: amount) {
                            Text("50%")
                        }
                        .gaugeStyle(.accessoryCircularCapacity)
                        .tint(.green)
                    }
                    
                }
                .padding(.horizontal)
            }
            .navigationTitle("Neuen Artikel hinzufügen")
            .toolbar {
                ToolbarItem(placement: .topBarTrailing) {
                    Button("Save") {
                        dismiss()
                    }
                }
            }
        }
    }
}

UI效果：
UI截图

解决方案

原生SwiftUI的SegmentedPickerStyle无法直接动态修改背景色，因为UISegmentedControl.appearance()是全局配置，仅在初始化时生效。要实现动态响应状态变化的颜色修改，需要通过UIViewRepresentable封装原生控件，实现自定义的可动态配置的Segmented Picker。

步骤1：创建自定义Segmented Picker控件

struct CustomSegmentedPicker: UIViewRepresentable {
    @Binding var selection: Int
    let options: [String]
    let selectedTintColor: UIColor
    
    func makeUIView(context: Context) -> UISegmentedControl {
        let segmentedControl = UISegmentedControl(items: options)
        segmentedControl.selectedSegmentIndex = selection
        segmentedControl.addTarget(context.coordinator, action: #selector(Coordinator.segmentChanged(_:)), for: .valueChanged)
        
        // 设置选中文字为白色
        let attributes: [NSAttributedString.Key: Any] = [.foregroundColor: UIColor.white]
        segmentedControl.setTitleTextAttributes(attributes, for: .selected)
        
        return segmentedControl
    }
    
    func updateUIView(_ uiView: UISegmentedControl, context: Context) {
        // 响应状态变化，更新选中索引和背景色
        uiView.selectedSegmentIndex = selection
        uiView.selectedSegmentTintColor = selectedTintColor
    }
    
    func makeCoordinator() -> Coordinator {
        Coordinator(self)
    }
    
    class Coordinator: NSObject {
        let parent: CustomSegmentedPicker
        
        init(_ parent: CustomSegmentedPicker) {
            self.parent = parent
        }
        
        @objc func segmentChanged(_ sender: UISegmentedControl) {
            parent.selection = sender.selectedSegmentIndex
        }
    }
}

步骤2：修改原View代码

移除init中的全局外观配置
添加计算属性，根据优先级返回对应颜色
替换原Picker为自定义控件，传入动态颜色

完整修改后的代码：

struct AddWunschSheetView: View {
    
    @State private var titelTextField: String = ""
    @State private var kostenTextField: String = ""
    
    @State private var sliderValue = 1.0
    @State private var amount = 0.5
    
    @State private var prioPicker = 1
    @State private var selection = 1
    
    @Environment(\.dismiss) var dismiss
    
    // 根据当前优先级返回对应颜色
    private var priorityColor: UIColor {
        switch prioPicker {
        case 1: return .red
        case 2: return .orange
        case 3: return .blue
        case 4: return .green
        default: return .systemGray
        }
    }
    
    var body: some View {
        NavigationStack {
            Form {
                Section("Artikeldetails") {
                    TextField("", text: $titelTextField, prompt: Text("Titel des Artikels"))
                }
                
                Section("Priority") {
                    CustomSegmentedPicker(
                        selection: $prioPicker,
                        options: ["Dringend", "Hoch", "Mittel", "Niedrig"],
                        selectedTintColor: priorityColor
                    )
                }
                
                CustomSegmentedPicker(
                    selection: $selection,
                    options: ["Tag", "Woche", "Monat"],
                    selectedTintColor: priorityColor
                )
                
                if selection == 1 {
                    Slider(value: $sliderValue, in: 1...31, step: 1.0, minimumValueLabel: Text("1"), maximumValueLabel: Text("31"), label: {})
                        .padding(.horizontal)
                } else if selection == 2 {
                    Slider(value: $sliderValue, in: 1...52, step: 1.0, minimumValueLabel: Text("1"), maximumValueLabel: Text("52"), label: {})
                        .padding(.horizontal)
                } else if selection == 3 {
                    Slider(value: $sliderValue, in: 1...12, step: 1.0, minimumValueLabel: Text("1"), maximumValueLabel: Text("12"), label: {})
                        .padding(.horizontal)
                }

                HStack {
                    Spacer()
                    Text( String(format: "%.0f", sliderValue))
                    if selection == 1 {
                        Text("Tage bis zum Ereigniss")
                    } else if selection == 2 {
                        Text("Wochen bis zum Ereigniss")
                    } else if selection == 3 {
                        Text("Monate bis zum Ereigniss")
                    }
                    Spacer()
                }
                
                HStack {
                    VStack {
                        Text("Kosten")
                            .bold()
                        TextField("", text: $kostenTextField, prompt: Text("0€"))
                            .keyboardType(.numberPad)
                            .padding(.top)
                    }
                    Spacer()
                    
                    // 复用优先级颜色，保持样式统一
                    Gauge(value: amount) {
                        Text("50%")
                    }
                    .gaugeStyle(.accessoryCircularCapacity)
                    .tint(Color(priorityColor))
                    
                }
                .padding(.horizontal)
            }
            .navigationTitle("Neuen Artikel hinzufügen")
            .toolbar {
                ToolbarItem(placement: .topBarTrailing) {
                    Button("Save") {
                        dismiss()
                    }
                }
            }
        }
    }
}

关键说明

CustomSegmentedPicker通过updateUIView方法监听状态变化，实时更新控件的选中背景色，解决了原生Picker无法动态修改样式的问题。
priorityColor计算属性统一管理优先级对应的颜色，便于维护和复用。
替换原Picker后，两个Segmented控件会同步响应优先级选择的变化，自动更新背景色。

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

如何基于优先级Picker选择动态修改两个Picker的背景色？

问题描述 #

解决方案 #

步骤1：创建自定义Segmented Picker控件 #

步骤2：修改原View代码 #

关键说明 #

问题描述

解决方案

步骤1：创建自定义Segmented Picker控件

步骤2：修改原View代码

关键说明