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()
}
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.