Cómo mostrar un menú en SwiftUI

Mostrar menús como pop-up al presionar un botón es muy sencillo en SwiftUI gracias a su vista Menu. Veamos un ejemplo de cómo crear un menú con diferentes opciones:

import SwiftUI
struct ContentView: View {
var body: some View {
// 1
Menu("Teams") {
// 2
Button("Real Madrid", action: {})
Button("Barcelona", action: {})
Button("Chelsea", action: {})
Button("Manchester City", action: {})
}
}
}
  1. Usamos la vista Menu, que recibe un LocalizedStringKey como parámetro, siendo este el título de nuestro botón.

Al usar LocalizedStringKey, la app soportará automáticamente las traducciones que tengamos en nuestro String Catalog

  1. Creamos las distintas opciones que tendrá nuestro menú.
Ejemplo de uso de un Menú con diferentes opciones en SwiftUI

Usando un menú dentro de un menú (Inception? 🤔)

Es posible crear un menú dentro de otro; simplemente, entre las opciones, en lugar de usar un Button, usaremos otro Menu. Veamos cómo:

Menu("Teams") {
Menu("Real Madrid") {
Button("Real Madrid", action: {})
Button("Real Madrid Castilla", action: {})
}
Button("Barcelona", action: {})
Button("Chelsea", action: {})
Button("Manchester City", action: {})
}
Ejemplo de uso de un Menú con otro menú dentro de sus opciones en SwiftUI

Customizar el label del Menú

Si en lugar de un simple string quieres tener más control sobre como se verá el label del Menú, podemos usar otro de sus constructores init(content:label:). Veamos como:

Menu {
Menu("Real Madrid") {
Button("Real Madrid", action: {})
Button("Real Madrid Castilla", action: {})
}
Button("Barcelona", action: {})
Button("Chelsea", action: {})
Button("Manchester City", action: {})
} label: {
// 1
Label("Teams", systemImage: "soccerball")
}
  1. En esta sección, añadiremos lo que queramos que muestre el label de nuestro Menú, en nuestro caso estamos usando un Label para mostrar un título y un icono.
Ejemplo de customización del label del Menú en SwiftUI

Creando diferentes secciones dentro del Menú

Podemos usar la vista Section para agrupar opciones dentro de secciones dentro de nuestro Menu. Veamos un ejemplo:

Menu {
// 1
Section("Football") {
Menu("Real Madrid") {
Button("Real Madrid", action: {})
Button("Real Madrid Castilla", action: {})
}
Button("Barcelona", action: {})
}
Section("Basketball") {
Button("Lakers", action: {})
}
Section("Baseball") {
Button("Chicago Cubs", action: {})
}
} label: {
Text("Teams")
}
  1. Simplementes agregamos las opciones que queramos dentro de Section, y ya podemos tener diferentes secciones agrupadas como opciones del Menu.
Ejemplo de diferentes secciones dentro de un Menú en SwiftUI

Como usar el Primary Action en un Menu

A partir de iOS 15, podemos agregar una acción por defecto al abrir el menú usando el constructor init(content:label:primaryAction:). Veamos un ejemplo:

Menu {
Menu("Real Madrid") {
Button("Real Madrid", action: {})
Button("Real Madrid Castilla", action: {})
}
Button("Barcelona", action: {})
} label: {
Text("Teams")
} primaryAction: {
// 1
print("Action called")
}
  1. Vemos el uso del nuevo constructor, en donde ejecutaremos lo que queramos como acción principal una vez el Menu sea abierto.

Comparte este artículo

Subscríbete a nuestro Newsletter

Mantente al día en el mundo de las aplicaciones móviles con nuestro blog especializado.

Artículos semanales

Todas las semanas artículos nuevos sobre el mundo de las aplicaciones móviles.

No spam

No te enviaremos spam, solo contenido de calidad. Puedes darte de baja cuando quieras.

Contenido de calidad

Nada de contenido generado de manera automática usando ChatGPT.

Recomendaciones

Tips indispensables sobre mejores prácticas y metodologías.

© 2024 AsyncLearn