SwiftUI Picker Separators

Question

Im 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)
    }

I would really appreciate your help with this.

Overact

Answer 1

Updated: Xcode 13.4 / macOS 12.4

Picker("Pick an option", selection: $selection) {
    Text("Option 1").tag(0)
    Divider()                // << here !!
    Text("Option 2").tag(1)
    Text("Option 3").tag(2)
}

Original:

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.

Tinsmith

Thanks for your answer! I tried that but the Divider view is also part of the options list and you can select it. (i don't want that behavior) – Overact

Did you tag it? When I tested it was not selectable. – Tinsmith

No, I tagged only the selectable items, but what i meant with 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. – Overact

Just use Divider() instead of VStack {Divider().padding(.leading)}. The divider is no longer vertical and will not be selectable. – Laryngoscope

Answer 2

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

Bibliofilm