Optionsmenü in der Navigationsleiste

Beschreibung

HierDiese wirdView diezeigt Frageeine beantwortet,Hauptansicht wiein icheinem einNavigationStack Pulldownmit einem Menü oben rechts in der Toolbaroberen platzierenrechten kann.Toolbar. Das Menü bündelt Aktionen wie Profil und Logout, wobei die Abmelden Aktion als destruktiv gekennzeichnet ist. So bleiben sekundäre Aktionen erreichbar und die Oberfläche übersichtlich.

🔍 Zweck

• Sekundäre Aktionen in einer kompakten Topbar bündeln
• Konsistente Darstellung von Profil und Logout innerhalb der App
• Prototyping von Menüaktionen in Navigationsansichten
• Reduktion von UI Überladung durch Kontextmenüs
• Trennung zwischen primären und sekundären Interaktionen

🖥️ Betriebssystem

iOS

📄 Codebeispiel

import SwiftUI

@main
struct TopbarOptionsMenuApp: App {
    var body: some Scene {
        WindowGroup {
            ContentView()
        }
    }
}

public struct ContentView: View {
    public init() {}

    public var body: some View {
        NavigationStack {
            // Main content placeholder
            Text("Main View")
                .navigationTitle("Home")
                .toolbar {
                    // Place the menu on the trailing side of the top bar
                    ToolbarItem(placement: .topBarTrailing) {
                        Menu {
                            // Non-destructive action
                            Button("Profile", action:) {
                                // Handle profile action
                                print("Open Profile")
                            })
                            // Destructive action clearly marked for accessibility and styling
                            Button("Logout", role: .destructive, action:destructive) {
                                // Handle logout action
                                print("Logged out")
                            })
                        } label: {
                            // Menu trigger with SF Symbol
                            Label("Options", systemImage: "ellipsis.circle")
                                .accessibilityLabel("Open options menu")
                        }
                    }
                }
        }
    }
}

// Modern Swift 5.10+ preview syntax
#Preview {
    ContentView()
}