Skip to main content

Navigation mit Toolbar und Einstellungsbutton

Beschreibung

Diese View zeigt eine Navigationsoberfläche mit Titel und zwei Steuerelementen in der Toolbar. Links befindet sich ein Bearbeiten Button und rechts ein Einstellungs Button, der eine einfache Einstellungsansicht als Sheet öffnet. Der Willkommens Text dient als Platzhalter für den Hauptinhalt.

🔍 Zweck

  • Aufbau einer Basisnavigation mit Titel und Toolbar
  • Hinzufügen eines Settings Einstiegs ohne eigenen Bildschirmwechsel
  • Prototyping von Toolbars mit führenden und abschließenden Aktionen
  • Demonstration von NavigationStack und ToolbarItem Platzierungen
  • Erweiterbare Vorlage für Listen oder Detailansichten

🖥️ Betriebssystem

iOS

📄 Codebeispiel

import SwiftUI

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

public struct ContentView: View {
    // Control presentation of the settings sheet
    @State private var showSettings = false

    public init() {}

    public var body: some View {
        NavigationStack {
            // Main content placeholder
            Text("Welcome to the app!")
                .frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .topLeading)
                .padding()
                .navigationTitle("Home")
                .toolbar {
                    // Leading toolbar item: edit button
                    ToolbarItem(placement: .navigationBarLeading) {
                        // EditButton toggles edit mode for editable content (e.g., lists)
                        EditButton()
                    }
                    // Trailing toolbar item: settings button
                    ToolbarItem(placement: .navigationBarTrailing) {
                        Button {
                            // Present settings as a sheet
                            showSettings = true
                        } label: {
                            Image(systemName: "gear")
                                .accessibilityLabel("Open Settings")
                        }
                    }
                }
        }
        // Present a simple settings screen
        .sheet(isPresented: $showSettings) {
            SettingsView()
        }
    }
}

// Minimal settings screen presented by the gear button
private struct SettingsView: View {
    // Example toggles to simulate settings
    @State private var notifications = true
    @State private var analytics = false

    var body: some View {
        NavigationStack {
            Form {
                // Basic settings toggles
                Toggle("Notifications", isOn: $notifications)
                Toggle("Share Analytics", isOn: $analytics)
            }
            .navigationTitle("Settings")
            .toolbar {
                // Close button for the sheet
                ToolbarItem(placement: .cancellationAction) {
                    // The dismiss action is provided by the environment
                    DismissButton()
                }
            }
        }
    }
}

// Helper to dismiss sheets from a toolbar
private struct DismissButton: View {
    @Environment(\.dismiss) private var dismiss
    var body: some View {
        Button("Close") {
            // Dismiss the presented sheet
            dismiss()
        }
    }
}

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