SwiftUI Picker in Menu

Question

I want to display the selection when using a picker in menu like in the reminders app for Sort By and I cannot for the life of me figure out how to do it.

This is what I want:

https://i.sstatic.net/Lwm2R.jpg

This is my code:

private func menuButton() -> some View {
    Menu {
        Menu {
            Picker(selection: $group, label: Text("Grouping options")) {
                Text("None").tag(0)
                Text("Type").tag(1)
            }
        } label: {
            Label("Group By", systemImage: "square.grid.3x1.below.line.grid.1x2")
        }
        Menu {
            Picker(selection: $sort, label: Text("Sorting options")) {
                Text("Name").tag(0)
                Text("Priority").tag(1)
            }
        } label: {
            Label("Sort By", systemImage: "arrow.up.arrow.down")
        }
        Divider()
        Button {
            toggleInbox()
        } label: {
            Label(inboxList?.isHidden == false ? "Hide Inbox" : "Show Inbox", systemImage: inboxList?.isHidden == false ? "eye.slash" : "eye")
        }
    } label: {
        Image(systemName: "ellipsis.circle.fill")
            .font(.custom("Button", size: 22))
            .foregroundStyle(.blue, Color(UIColor.systemGray5))
    }
}

vollkorntomate · Accepted Answer · 2023-11-13 20:53:07Z

3

Use a Button as the label for your Menu (see Swiftui: multiple lines in a menu item or picker):

Menu {
    Picker(selection: $sort, label: Text("Sorting options")) {
        Text("Name").tag(0)
        Text("Priority").tag(1)
    }
} label: {
    Button(action: {}) {
        Text("Sort by")
        Text(sort == 0 ? "Name" : "Priority")
        Image(systemName: "arrow.up.arrow.down")
    }
}

Another hint: you can use .pickerStyle(.menu) on your Picker, so you don't have to wrap it in a Menu.

answered Nov 13, 2023 at 20:53

vollkorntomate

8952 gold badges9 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Kngw Kngw · Accepted Answer · 2024-11-04 15:45:35Z

0

As a supplement, it seems that it is also possible to achieve this by directly placing the three views in the label: instead of inside the Button.

Menu {
    Picker(selection: $sort, label: Text("Sorting options")) {
        Text("Name").tag(0)
        Text("Priority").tag(1)
    } label: {
        Text("Sort by")
        Text(sort == 0 ? "Name" : "Priority")
        Image(systemName: "arrow.up.arrow.down")
    }
}

By the way, wrapping them in a VStack or HStack does not achieve the desired appearance.

answered Nov 4, 2024 at 15:45

Kngw Kngw

1231 silver badge9 bronze badges

Collectives™ on Stack Overflow

SwiftUI Picker in Menu

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related