How to show a menu when a button is pressed
How to show a menu when a button is pressed 관련
Updated for Xcode 15
Updated in iOS 15
SwiftUI gives us a dedicated view for showing popup menus from buttons, helpfully called Menu. This can be created from a simple string or using a custom view, but either way you get to send in a variety of buttons to control what you want to appear in the menu.
Tips
On macOS, Menu is automatically rendered as a pulldown button.
For example, we could create a simple button with several options like this:
struct ContentView: View {
var body: some View {
Menu("Options") {
Button("Order Now", action: placeOrder)
Button("Adjust Order", action: adjustOrder)
Button("Cancel", action: cancelOrder)
}
}
func placeOrder() { }
func adjustOrder() { }
func cancelOrder() { }
}
You can also place menus inside menus if you want, which will cause iOS to reveal the second menu when the first option is tapped:
struct ContentView: View {
var body: some View {
Menu("Options") {
Button("Order Now", action: placeOrder)
Button("Adjust Order", action: adjustOrder)
Menu("Advanced") {
Button("Rename", action: rename)
Button("Delay", action: delay)
}
Button("Cancel", action: cancelOrder)
}
}
func placeOrder() { }
func adjustOrder() { }
func rename() { }
func delay() { }
func cancelOrder() { }
}
If you wanted a customized label using some text and an icon, you could use this:
struct ContentView: View {
var body: some View {
Menu {
Button("Order Now", action: placeOrder)
Button("Adjust Order", action: adjustOrder)
} label: {
Label("Options", systemImage: "paperplane")
}
}
func placeOrder() { }
func adjustOrder() { }
}
Finally, in iOS 15 and later menus can also have a primary action, which is triggered when the menu’s button is tapped rather than held down – press and release to trigger the primary action, or hold down to get the full menu of options.
So, we could create a menu that supports both simple taps as well as a full set of options:
struct ContentView: View {
var body: some View {
Menu("Options") {
Button("Order Now", action: placeOrder)
Button("Adjust Order", action: adjustOrder)
Button("Cancel", action: cancelOrder)
} primaryAction: {
justDoIt()
}
}
func justDoIt() {
print("Button was tapped")
}
func placeOrder() { }
func adjustOrder() { }
func cancelOrder() { }
}
Similar solutions…
