SwiftUI Picker Separators

2.1k Views Asked by At

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:

example1

example2

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.

2

There are 2 best solutions below

0
On

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

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

demo

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.