Skip to main content

Sidebar-Navigation mit Badge

Beschreibung

VerwendetDiese AbzeichenView innutzt einemNavigationSplitView, Seitenleistenmenüum eine Sidebar mit zwei Bereichen bereitzustellen: Posteingang und verbessertEinstellungen. soDer diePosteingang App-Navigationzeigt ein Badge mit einer Anzahl offener Elemente, während der Detailbereich eine Platzhalteransicht anzeigt, bis eine Sektion gewählt wird.

🔍 Zweck

  • E Mail oder Nachrichten App mit Posteingang und Einstellungen
  • Dashboard mit Seitennavigation und Zähler für Multitasking.offene Items
  • Produktivitäts App mit klarer Trennung von Bereichen
  • Prototyping einer adaptiven iPad Navigation
  • Beispiel für Badges in Navigationslisten

🖥️ Betriebssystem

iOS

📄 Codebeispiel

import SwiftUI

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

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

    public var body: some View {
        NavigationSplitView {
            // Sidebar with navigation destinations
            List {
                NavigationLink {
                    // Destination for Inbox
                    Text("Inbox View")
                        .navigationTitle("Inbox")
                } label: {
                    // Label with an SF Symbol and a badge count
                    Label("Inbox", systemImage: "tray.full")
                        .badge(3)
                }

                NavigationLink {
                    // Destination for Settings
                    Text("Settings View")
                        .navigationTitle("Settings")
                } label: {
                    Label("Settings", systemImage: "gear")
                }
            }
        } detail: {
            // Placeholder shown until a section is selected
            Text("Select a section")
                .foregroundStyle(.secondary)
        }
    }
}

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