Question 68598 in IOS Swift Question posted in
The official documentation can be found here.

Sublabel inside SwiftUI Menu Button – Ios swift

I try to create a menu with buttons containing primary and secondary labels like the photo bellow using SwiftUI, so I embed the button and the text (as secondary label) in the VStack, but it’s doesn’t work.
How I can create this view in swiftUI?

enter image description here

The Code

 Menu {
        Section {
            search
        }
        Section {
// The sort button
        Menu  {
            Picker("Sorting options", selection: $sort) {
                ForEach(SortType.allCases, id: .self) { type in
                    Label("title", systemImage: "chevron.up")
                        .tag(type)
                }
            }
        } label: {
// Here I should embed title and subtitle like the photo but I don't know how.
            Label("Sort By", systemImage: "arrow.up.arrow.down")
        }
        }
    } label: {
        menuLabel
    }
Tags:

2

Answers


  1. 0

    You can achieve this by using UIKit since iOS 15.0

    var menu = UIMenu()

if #available(iOS 15.0, *) {
   menu = UIMenu(title: "Sort By",
                 subtitle: "Name",
                 children: provideJobSortOptions())
} else {
   menu = UIMenu(title: "Sort By"), children: provideJobSortOptions())
}
    Login or Signup to reply.
  2. 0

    I found a partial way to do this, but it is without the subtitle text smaller and in a foregroundStyle(.secondary) :

    enter image description here

    Picker(selection: $pointsSortType) {
    Button(PointsSortType.date            .displayName) {}.tag(PointsSortType.date            .rawValue)
    Button(PointsSortType.type            .displayName) {}.tag(PointsSortType.type            .rawValue)
    Button(PointsSortType.submissionStatus.displayName) {}.tag(PointsSortType.submissionStatus.rawValue)
    Button(PointsSortType.duration        .displayName) {}.tag(PointsSortType.duration        .rawValue)
} label: {
    Label {
        Text("""
             Sort By
             Manual
             """)
    } icon: {
        Image(systemName: "arrow.up.arrow.down")
    }
}
.pickerStyle(.menu)

    Here, we are using Multi-Line Strings to trick it. I tried messing around with adding multiple Texts in a bunch of Stacks. I even tried type erasing it with AnyView(erasing:), but somehow it’s still smarter. I even tried interpolating Text views and adding Text modifiers like Bold, but it overrode that as well.

    Sorry for the spaces in between, but that is how I like to format my code.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search