Picker with icon button

Question

Created Jul ’24

Replies 1

Boosts 0

Participants 1

I'm recreating the sleep timer from the Podcasts app. How can I display an icon for the picker instead of the current selection?

This doesn't work:

Picker("Sleep Timer", systemImage: "moon.zzz.fill", selection: $sleepTimerDuration) {
                    Text("Off").tag(0)
                    Text("5 Minutes").tag(5)
                    Text("10 Minutes").tag(10)
                    Text("15 Minutes").tag(15)
                    Text("30 Minutes").tag(30)
                    Text("45 Minutes").tag(45)
                    Text("1 Hour").tag(60)
                }

Do I need to drop down to UIKit for this?

Boost

Answer 1

Audulus OP

Jul ’24

Well this works, even though it seems odd to stick the picker inside the menu.

Menu {
                    Picker("Sleep Timer", selection: $sleepTimerDuration) {
                        Text("Off").tag(0)
                        Text("5 Minutes").tag(5)
                        Text("10 Minutes").tag(10)
                        Text("15 Minutes").tag(15)
                        Text("30 Minutes").tag(30)
                        Text("45 Minutes").tag(45)
                        Text("1 Hour").tag(60)
                    }
                } label: {
                    Image(systemName: "moon.zzz.fill")
                        .resizable()
                        .tint(.white)
                        .frame(width: 34, height: 34)
                        .padding()
                }

0