Question 130697 in Xcode Question posted in
Whether you're new to Xcode or an experienced developer, our archive has everything you need to know about this integrated development environment (IDE). From basic functionalities to advanced features, our archive covers a wide range of Xcode-related questions and answers. Browse our archive now and find solutions to your Xcode questions, and take your app development skills to the next level

Xcode – How do I add a popup menu view in SwiftUI?

I am trying to implement a feature in my app that is similar to Apple’s weather app. Here is a photo example:

enter image description here

From the looks of it, it is a button and when the user clicks on it, something else appears. What kind of SwiftUI control is that? Basically, what code made that button and resulting little (mini) menu that appears?

Tags:

2

Answers


  1. 0

    That would be a Menu.

    As per the Apple Developer Documentation, here is an example of usage:

    Menu("Actions") {
    Button("Duplicate", action: duplicate)
    Button("Rename", action: rename)
    Button("Delete…", action: delete)
    Menu("Copy") {
        Button("Copy", action: copy)
        Button("Copy Formatted", action: copyFormatted)
        Button("Copy Library Path", action: copyPath)
    }
}

    If you want the button to open the menu to be an SF Symbol, like the ellipse with the three dots, you can call Menu a bit differently:

    Menu {
     // Add options here...
} label: {
    Image(systemName: "ellipsis.circle")
}
    Login or Signup to reply.
  2. 0

    That would be the menu

             import SwiftUI

     struct menuView: View {
        var body: some View {
           NavigationView {
                 ZStack {
                    VStack{
                       Text("this is a test")
                    }
                 }
                 .navigationTitle("My custom title")
                 .toolbar {
                    ToolbarItemGroup(placement: .navigationBarTrailing) {
                       
                       Menu {
                             Button(action: {}) {
                                Label("Create a file", systemImage: "doc")
                             }
                             
                             Button(action: {}) {
                                Label("Create a folder", systemImage: "folder")
                             }
                       }
                    label: {
                       Label("Add", systemImage: "ellipsis.circle")
                    }
                    }
                 }
           }
        }
     }

    enter image description here

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

Back To Top
Search