ios – Is it potential to vary the colour of label inside Picker?

0
22
ios – Is it potential to vary the colour of label inside Picker?


So far as I do know, menus and pickers will ignore any styling like colour, font, and many others.

For optimum management, you will want to construct your individual menu. I began engaged on one some time again, however it’s actually simply the core construction proper now.

This is the code:

import SwiftUI

enum pickerColor: String, CaseIterable, Identifiable {
    
    var id: String { self.rawValue }
    
    case indigo
    case crimson
    case inexperienced
    case blue
    case yellow
    case orange
    case purple
    
    var colour: Coloration {
        swap self {
            case .indigo: return .indigo
            case .crimson: return .crimson
            case .inexperienced: return .inexperienced
            case .blue: return .blue
            case .yellow: return .yellow
            case .orange: return .orange
            case .purple: return .purple
        }
    }
}

struct PickerMenuColor: View {
    
    //State values
    @State personal var showMenu = false
    @State personal var selectedColor: pickerColor = .indigo

    //Physique
    var physique: some View {
        
        VStack {
            
            //Button that opens the menu
            Button {
                showMenu.toggle() //this will also be wrapped in withAnimation {showMenu.toggle()}
            } label: {
                //Button label
                HStack {
                    Textual content("(selectedColor.rawValue.capitalized)")
                    
                    //Label chevron - remark out if picker fashion icon not wanted
                    Picture(systemName: "chevron.up.chevron.down")
                        .font(.system(dimension: 13))
                }
                //Label colour
                .foregroundStyle(selectedColor.colour)
            }
            .overlay(alignment: .backside) {
                if showMenu {
                    VStack(spacing: 5) {
                        
                        //Make instances into an array for gaining access to an index
                        let pickerColorsArray = Array(pickerColor.allCases.enumerated())
                        
                        //Menu loop
                        ForEach(pickerColorsArray, id: .factor ) { index, colour in
                            
                            //Choice row
                            Button {
                                withAnimation {
                                    selectedColor = colour
                                    showMenu.toggle() //remark this out in order for you menu to stay open after making a variety
                                }
                                
                            } label : {
                                //Choice label
                                VStack(alignment: .main, spacing: 5) {
                                    HStack {
                                        Label {
                                            Textual content("(colour.rawValue.capitalized)")
                                        } icon: {
                                            Picture(systemName: selectedColor == colour ? "checkmark" : "circle")
                                                .font(.system(dimension: 12))
                                                .opacity(colour == selectedColor ? 1 : 0)
                                        }
                                        
                                        //Horizontal spacing
                                        Spacer()
                                        
                                        //Coloured circle icon
                                        Picture(systemName: "circle.fill")
                                            .foregroundStyle(colour.colour)
                                    }
                                    
                                    //Row padding
                                    .padding(.horizontal)
                                    .padding(.vertical, 5)
                                    
                                    //Add divider after every row aside from the final row
                                    if index != pickerColorsArray.depend - 1 {
                                        Divider()
                                            .body(top: 5)
                                    }
                                }
                            }
                            //Choice row textual content colour (button tint)
                            .tint(.black)
                        }
                    }
                    //Menu width
                    .body(width: 200) //use .fixedSize() as a substitute of .body if customized width not wanted
                    
                    //Menu high and backside padding
                    .padding(.vertical, 10)
                    
                    //Menu background
                    .background(.thinMaterial, in: RoundedRectangle(cornerRadius: 20))
                    
                    //Menu place (customise as wanted, further logic could also be required right here)
                    .offset(y: -30)
                    
                    //Menu shadow
                    .shadow(colour: .black.opacity(0.2) , radius: 70)
                }
            }
        }
    }
}

#Preview {
    PickerMenuColor()
}

enter image description here

Word: When posting code for questions, be sure it is full and reproducible so it may be copied and pasted with out the necessity for additional guesses and additions.

LEAVE A REPLY

Please enter your comment!
Please enter your name here