I'm trying to create a SwiftUI Picker in MacOS that looks like the ones in Xcode or other Mac Apps. To be more specific, I'm trying to add that separator line between the elements in the picker.
Like these:
I had tried several options but I can't find a way to add those separators.
Picker Sample Code:
Picker("Pick an option", selection: $selection) {
Text("Option 1").tag(0)
Text("Option 2").tag(1)
Text("Option 3").tag(2)
}
Picker("Pick an option", selection: $selection) {
Text("Option 1").tag(0)
Divider() // << here !!
Text("Option 2").tag(1)
Text("Option 3").tag(2)
}
Here is possible trick (can't name it solution, rather workaround)
Tested with Xcode 11.4 / macOS 10.15.5
Picker("Pick an option", selection: $selection) {
Text("Option 1").tag(0)
VStack {Divider().padding(.leading)}
Text("Option 2").tag(1)
Text("Option 3").tag(2)
}
Note: VStack is needed to make Divider horizontal, otherwise it is for some Apple-ty reason is vertical.
select is that you hover the item this will highlight and if you click on it, it will no be selected but the popup will disappear. In the controls from Xcode (like in the screenshots) the hover and click actions are ignored.
Divider() instead of VStack {Divider().padding(.leading)}. The divider is no longer vertical and will not be selectable.As @Peter-schorn mentions above, the correct way to do this as of 2022 is to just use Divider():
Picker("Pick an option", selection: $selection) {
Text("Option 1").tag(1)
Divider()
Text("Option 2").tag(2)
}
I believe the best (and intended) way to implement this is using Section.
Picker("Pick an option", selection: $selection) {
Section {
Text("Option 1").tag(0)
}
Section {
Text("Option 2").tag(1)
Text("Option 3").tag(2)
}
}
Note: I had an issue on macOS 26.1 with the Divider approach where the option below the divider was not visible when selected. I did not have this issue using Section.
Bonus: You can even add headers to the sections if you want as well.
Picker("Pick an option", selection: $selection) {
Section("First") {
Text("Option 1").tag(0)
}
Section("Second") {
Text("Option 2").tag(1)
Text("Option 3").tag(2)
}
}
