PS You could do your only picker
struct MyColorPicker: View {
@Environment(\.dismiss) var dismiss
@Binding var selectedColor: Color
let colors: [Color] = [.pink, .purple, .red, .orange, .gray, .green, .teal, .indigo, .blue, .cyan, .mint, .yellow, .primary, .brown]
let colorColumns = [
GridItem(.adaptive(minimum: 44))
]
var body: some View {
LazyVGrid(columns: colorColumns) {
ForEach(colors, id: \.self) { color in
ZStack {
color
.aspectRatio(1, contentMode: .fit)
.cornerRadius(6)
if color == selectedColor {
Image(systemName: "checkmark.circle")
.foregroundColor(.white)
.font(.largeTitle)
}
}
.onTapGesture {
selectedColor = color
dismiss()
}
}
}
.padding()
}
}
Use it
struct ContentView: View {
@State private var selectedColor = Color.red
@State private var showingPicker = false
var body: some View {
HStack {
Text("Accent color")
.foregroundColor(selectedColor)
Spacer()
Circle()
.fill(selectedColor)
.frame(width: 20)
.onTapGesture {
showingPicker.toggle()
}
}
.padding()
.sheet(isPresented: $showingPicker) {
MyColorPicker(selectedColor: $selectedColor)
.presentationDetents([.medium])
}
}
}