SwiftUI Colored Icon Picker Samples

pickersamples.swift

import SwiftUI

struct ContentView: View {
    @State private var labelStyle: PickerLabelStyle = .label
    @State private var selection: PickerItem = PickerItem.item1
    @State private var imageName: String = "circle.fill"
    @State private var secondaryColor: Color = .primary

    var body: some View {
        List {
            let list = PickerItem.all

            Section {
                Picker("Picker", selection: $selection) {
                    ForEach(list) { item in
                        itemLabel(item: item)
                            .tag(item)
                    }
                }

                LabeledContent("Menu") {
                    Menu {
                        ForEach(list) { item in
                            Button{
                                self.selection = item
                            } label: {
                                itemLabel(item: item)
                            }
                        }
                    } label: {
                        itemLabel(item: selection)
                    }
                }

                LabeledContent("Menu + Picker") {
                    Menu {
                        Picker("Picker", selection: $selection) {
                            ForEach(list) { item in
                                itemLabel(item: item)
                                    .tag(item)
                            }
                        }
                    } label: {
                        itemLabel(item: selection)
                    }
                }

                LabeledContent("Menu + Picker 2") {
                    Menu {
                        Picker("Picker", selection: $selection) {
                            ForEach(list) { item in
                                itemLabel(item: item)
                                    .tag(item)
                            }
                        }
                        //.pickerStyle(.menu)
                        Text("Text")
                        Button("Button") { }
                    } label: {
                        itemLabel(item: selection)
                    }
                }
            } header: {
                Text("Samples")
            }


            //MARK: - Options

            Section {
                Picker("Label Style", selection: $labelStyle) {
                    ForEach(PickerLabelStyle.all) { style in
                        Text(style.rawValue).tag(style)
                    }
                }
                .pickerStyle(.menu)

                let images:[String] = ["circle.fill", "circlebadge.fill", "calendar.circle.fill", "heart.circle.fill"]
                Picker("Image", selection: $imageName) {
                    ForEach(images, id: \.self) { image in
                        Label(image, systemImage: image)
                            .tag(image)
                    }
                }


                let colors:[Color] = [.primary, .black, .white, .gray]
                Picker("Secondary Color", selection: $secondaryColor) {
                    ForEach(colors, id: \.self) { color in
                        Text("\(color)")
                            .tag(color)
                    }
                }
            } header: {
                Text("Options")
            }
        }
    }

    @ViewBuilder
    func itemLabel(item: PickerItem) -> some View {
        PickerLabelView(style: labelStyle, item: item, image: imageName, secondaryColor: secondaryColor)
    }
}

enum PickerLabelStyle: String, Identifiable {
    var id: String { return rawValue }
    case label = "Label"
    case labeledContent = "Labeled Content"
    case labeledContent2 = "Labeled Content 2"
    case hstack = "HStack Text"
    static var all:[Self] = [.label, .labeledContent, .labeledContent2, .hstack]
}

struct PickerLabelView: View {
    let style: PickerLabelStyle
    let item: PickerItem
    let image: String
    let secondaryColor: Color

    var body: some View {
        switch style {
        case .label:
            Label(item.title, systemImage: image)
                .foregroundStyle(item.color, secondaryColor)

        case .labeledContent:
            LabeledContent {
                Text(item.title)
            } label: {
                Image(systemName: image)
                    .imageScale(.small)
                    .foregroundStyle(item.color, secondaryColor)
            }

        case .labeledContent2:
            LabeledContent {
                HStack(spacing: 5) {
                    Image(systemName: image)
                        .imageScale(.small)
                        .foregroundStyle(item.color, secondaryColor)
                    Text(item.title)
                }
            } label: {
            }

        case .hstack:
            HStack(spacing: 5) {
                Image(systemName: image)
                    .imageScale(.small)
                    .foregroundStyle(item.color, secondaryColor)
                Text(item.title)
            }
        }
    }
}

struct PickerItem: Identifiable , Hashable{
    var id:String { return title }
    let title: String
    let color: Color

    static var item1 = PickerItem(title: "Item 1", color: Color.red)
    static var item2 = PickerItem(title: "Item 2", color: Color.blue)
    static var item3 = PickerItem(title: "Item 3", color: Color.green)

    static var all:[PickerItem] { return [item1, item2, item3] }
}

#Preview {
    ContentView()
}