5

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.

xlsmearlx
  • 628
  • 8
  • 9

2 Answers2

5

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.

Asperi
  • 228,894
  • 20
  • 464
  • 690
  • 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) – xlsmearlx Jul 23 '20 at 17:57
  • Did you tag it? When I tested it was not selectable. – Asperi Jul 23 '20 at 18:09
  • 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. – xlsmearlx Jul 23 '20 at 21:37
  • 1
    Just use `Divider()` instead of `VStack {Divider().padding(.leading)}`. The divider is no longer vertical and will not be selectable. – Peter Schorn Feb 02 '22 at 15:08
4

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)
}
Bryan
  • 4,628
  • 3
  • 36
  • 62