SwiftUI中用ForEach实现Picker下拉选项左侧图标着色问题

问题根源 #

1. Tag与绑定值类型不匹配：你定义的selectedOption是Int类型，但Picker选项里的tag用的是字符串类型的颜色名称，导致Picker无法正确关联选项，自定义视图的样式也被系统默认样式覆盖。
2. 图标颜色固定硬编码：把图标颜色写死成.red，没有根据选项的颜色名称动态匹配对应颜色。

修改后的完整代码 #

ContentView.swift

import SwiftUI

struct ContentView: View {
    let availableColours: [String] = ["yellow", "green", "red", "blue"]
    // 将绑定值改为String类型，和颜色名称对应，逻辑更直观
    @Binding var selectedOption: String

    var body: some View {
        VStack {
            Picker("Colour:", selection: $selectedOption) {
                ForEach(availableColours, id: \.self) { colourName in
                    Label {
                        Text(colourName)
                    } icon: {
                        Image(systemName: "rectangle.fill")
                            // 用你写的Color扩展动态设置对应颜色
                            .foregroundColor(Color(wordName: colourName))
                    }
                    .tag(colourName)
                }
            }
            .pickerStyle(.menu)
            .padding()
        }
        .frame(maxWidth: 200)
    }
}

struct BindingViewExamplePreviewContainer: View {
    // 默认选中第一个颜色选项
    @State private var defaultChoice = "yellow"

    var body: some View {
        ContentView(selectedOption: $defaultChoice)
    }
}

#Preview {
    BindingViewExamplePreviewContainer()
}

App.swift

import SwiftUI

@main
struct ExperimentsDropDownApp: App {
    @State private var defaultChoice = "yellow"
    var body: some Scene {
        WindowGroup {
            ContentView(selectedOption: $defaultChoice)
        }
    }
}

+Color.swift（无需修改）

import SwiftUI
extension Color {
    init?(wordName: String) {
        switch wordName {
        case "clear":       self = .clear
        case "black":       self = .black
        case "white":       self = .white
        case "gray":        self = .gray
        case "red":         self = .red
        case "green":       self = .green
        case "blue":        self = .blue
        case "orange":      self = .orange
        case "yellow":      self = .yellow
        case "pink":        self = .pink
        case "purple":      self = .purple
        case "primary":     self = .primary
        case "secondary":   self = .secondary
        default:            return nil
        }
    }
}

修改说明 #

1. 统一类型匹配：把绑定值和Tag都改成字符串类型的颜色名称，避免类型不匹配导致的样式失效问题。如果一定要用Int类型的绑定值，也可以改成下面的写法：

// ContentView里的绑定值改为Int
@Binding var selectedOption: Int

// ForEach部分替换为
ForEach(Array(availableColours.enumerated()), id: \.offset) { index, colourName in
    Label {
        Text(colourName)
    } icon: {
        Image(systemName: "rectangle.fill")
            .foregroundColor(Color(wordName: colourName))
    }
    .tag(index)
}

同时把预览和App里的defaultChoice设为0（对应第一个选项）即可。
2. 动态着色：利用你已经写好的Color(wordName:)扩展，根据选项的颜色名称动态设置图标颜色，去掉固定的.red。
3. 使用Label组件：相比HStack，Label更符合SwiftUI菜单选项的结构规范，能确保自定义图标样式被正确应用，不会被系统默认样式覆盖。

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