Navigation mit Toolbar und Einstellungsbutton

Beschreibung

DieDiese ToolbarView amzeigt obereneine RandNavigationsoberfläche kannmit ganzTitel individuellund gestaltetzwei werden.Steuerelementen Inin diesemder BeispielToolbar. gibtLinks esbefindet oben linkssich ein Edit-Bearbeiten Button und oben rechts einenein ButtonEinstellungs Button, der eine einfache Einstellungsansicht als Sheet öffnet. Der Willkommens Text dient als Platzhalter für den Hauptinhalt.

🔍 Zweck

• Aufbau einer Basisnavigation mit einemTitel Zahnrad,und welcherToolbar
die
• Hinzufügen Einstellungeneines symbolisiert.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 {
        NavigationViewNavigationStack {
            // Main content placeholder
            Text("Welcome to the app!")
                .frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .topLeading)
                .padding()
                .navigationTitle("Home")
                .toolbar {
                    // AddLeading atoolbar item: edit button
                    ToolbarItem(placement: .navigationBarLeading) {
                        // EditButton toggles edit mode for editable content (e.g., lists)
                        EditButton()
                    }
                    // Trailing toolbar item: settings button to the toolbar
                    ToolbarItem(placement: .navigationBarTrailing) {
                        Button(action:Button {
                            // Action forPresent settings as a sheet
                            showSettings = true
                        }) label: {
                            Image(systemName: "gear")
                                .accessibilityLabel("Open Settings")
                        }
                    }
                }
        }
        // AddPresent ana editsimple 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 toolbarsheet
                ToolbarItem(placement: .navigationBarLeading)cancellationAction) {
                    EditButton(// 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()
}