SwiftUI Picker/Menu组件中选项图片不显示问题排查

创建用于选择ShoppingCategory的Picker（菜单样式）或Menu组件时，打开菜单后仅能看到已选中的图标，其余选项的图标完全不可见，但空白区域仍可点击选择。

原视图代码（Picker版本） #

@State private var category: ShoppingCategory? = nil
var body: some View {
            Picker("Category", selection: $category) {
                Image(systemName: "slash.circle")
                    .tag(ShoppingCategory?(nil))
                ForEach(ShoppingCategory.allCases, id: \.self) { category in
                    category.systemImage
                        .resizable()
                        .frame(width: 32)
                        .tag(ShoppingCategory?(category))
                }
            }
            .pickerStyle(.menu)
}

ShoppingCategory枚举代码 #

enum ShoppingCategory: Int, CaseIterable, Codable {
    case groceries
    case pet
    case restauraunt
    case furniture
    case clothes
    case makeup
    case household
    case toys
    case tech
    case games
    
    var systemImageName: String {
        switch self {
        case .groceries: "carrot"
        case .pet: "pawprint"
        case .restauraunt: "fork.knife"
        case .furniture: "chair.lounge"
        case .clothes: "hanger"
        case .makeup: "sparkles"
        case .household: "house"
        case .toys: "teddybear"
        case .tech: "desktopcomputer"
        case .games: "gamecontroller"
        }
    }

    var systemImage: Image {
        Image(systemName: systemImageName)
    }
}

原视图代码（Menu版本） #

Menu {
    Button {
        self.category = nil
    } label: {
        Image(systemName: "slash.circle")
            .resizable()
            .frame(width: 32)
    }
    ForEach(ShoppingCategory.allCases, id: \.self) { category in
        Button {
            self.category = category
        } label: {
            category.systemImage
                .resizable()
                .frame(width: 32)
        }
    }
} label: {
    if let category {
        category.systemImage
    } else {
        Image(systemName: "slash.circle")
    }
}

解决方案 #

问题根源在于菜单选项中的Image未设置明确的前景色，默认继承了菜单的配色，导致未选中的图标颜色与背景重合，无法显示。只需给菜单内的所有Image添加.foregroundColor(.primary)即可解决：

修复后的Picker代码 #

@State private var category: ShoppingCategory? = nil
var body: some View {
            Picker("Category", selection: $category) {
                Image(systemName: "slash.circle")
                    .foregroundColor(.primary)
                    .tag(ShoppingCategory?(nil))
                ForEach(ShoppingCategory.allCases, id: \.self) { category in
                    category.systemImage
                        .resizable()
                        .frame(width: 32)
                        .foregroundColor(.primary)
                        .tag(ShoppingCategory?(category))
                }
            }
            .pickerStyle(.menu)
}

修复后的Menu代码 #

Menu {
    Button {
        self.category = nil
    } label: {
        Image(systemName: "slash.circle")
            .resizable()
            .frame(width: 32)
            .foregroundColor(.primary)
    }
    ForEach(ShoppingCategory.allCases, id: \.self) { category in
        Button {
            self.category = category
        } label: {
            category.systemImage
                .resizable()
                .frame(width: 32)
                .foregroundColor(.primary)
        }
    }
} label: {
    if let category {
        category.systemImage
    } else {
        Image(systemName: "slash.circle")
    }
}

也可以直接修改枚举中的systemImage属性，统一添加前景色，避免重复代码：

var systemImage: Image {
    Image(systemName: systemImageName)
        .foregroundColor(.primary)
}

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