Cómo mostrar un menú en SwiftUI

Marcelo Laprea

12 junio, 20243min de lectura

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.

2. Creamos las distintas opciones que tendrá nuestro menú.

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: {})
}

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.

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.

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.