Toolbars

Das Problem: Wohin mit den Aktionen?

Deine Liste aus der letzten Lektion braucht einen Knopf zum Hinzufügen eines Eintrags. Und vielleicht einen zum Sortieren. Einen zum Bearbeiten. Packst du sie alle in die Liste, verdrängen sie den eigentlichen Inhalt.

iOS hat für solche Aktionen feste Orte: oben rechts in der Navigationsleiste das Plus der Notizen-App, unten die Werkzeugleiste in Safari. Nutzer erwarten Aktionen genau dort. Mit .toolbar platzierst du Elemente an diesen Stellen.

Die erste Toolbar

struct NotesList: View {
    @State private var notes = ["Einkaufsliste", "Ideen"]

    var body: some View {
        NavigationStack {
            List(notes, id: \.self) { note in
                Text(note)
            }
            .navigationTitle("Notizen")
            .toolbar {
                Button("Neu", systemImage: "plus") {
                    notes.append("Neue Notiz \(notes.count + 1)")
                }
            }
        }
    }
}

• .toolbar { ... } steht wie .navigationTitle an der View im NavigationStack.
• Ein Button mit systemImage zeigt in der Leiste nur das Symbol. Der Titel „Neu“ wird trotzdem verwendet: VoiceOver liest ihn vor, und bei langem Drücken erscheint er als Hinweis. Lass ihn deshalb nie weg.

Platzierungen mit ToolbarItem

Ohne Angabe wählt SwiftUI selbst, wo ein Element landet, auf dem iPhone meist oben rechts. Mit ToolbarItem bestimmst du die Position:

.toolbar {
    ToolbarItem(placement: .topBarLeading) {
        EditButton()
    }
    ToolbarItem(placement: .topBarTrailing) {
        Button("Neu", systemImage: "plus") { addNote() }
    }
    ToolbarItem(placement: .bottomBar) {
        Text("\(notes.count) Notizen")
            .font(.footnote)
    }
}

Mehrere Elemente gruppieren

Mehrere Elemente an derselben Stelle fasst du mit ToolbarItemGroup zusammen:

.toolbar {
    ToolbarItemGroup(placement: .bottomBar) {
        Button("Teilen", systemImage: "square.and.arrow.up") { }
        Spacer()
        Button("Favorit", systemImage: "star") { }
        Spacer()
        Button("Löschen", systemImage: "trash") { }
    }
}

Die Spacer verteilen die Buttons gleichmäßig über die Leiste, genau wie in einem HStack (Lektion 2.7).

Menüs in der Toolbar

Für mehrere verwandte Aktionen bietet sich ein Menü an. Es spart Platz und hält die Leiste ruhig:

.toolbar {
    Menu("Sortieren", systemImage: "arrow.up.arrow.down") {
        Button("Nach Name") { sortByName() }
        Button("Nach Datum") { sortByDate() }
        Divider()
        Button("Zurücksetzen", role: .destructive) { reset() }
    }
}

Ein Tipp auf das Symbol öffnet ein Menü mit den Optionen. Divider trennt Gruppen, und Buttons mit role: .destructive werden rot.

Auch ein Picker funktioniert in einem Menü. Dann bekommt die gewählte Option automatisch ein Häkchen:

@State private var sortOrder = "Name"

.toolbar {
    Menu("Sortieren", systemImage: "arrow.up.arrow.down") {
        Picker("Sortierung", selection: $sortOrder) {
            Text("Name").tag("Name")
            Text("Datum").tag("Datum")
        }
    }
}

Ein Titel in der Mitte

Mit .principal ersetzt du den Titel durch eine eigene View, zum Beispiel einen segmentierten Picker:

.toolbar {
    ToolbarItem(placement: .principal) {
        Picker("Ansicht", selection: $view) {
            Text("Liste").tag("Liste")
            Text("Raster").tag("Raster")
        }
        .pickerStyle(.segmented)
        .frame(width: 200)
    }
}

Die Leiste gestalten

Einige Modifier verändern die Navigationsleiste selbst:

.toolbarBackground(.visible, for: .navigationBar)
.toolbarBackground(.indigo, for: .navigationBar)
.toolbarColorScheme(.dark, for: .navigationBar)

• .toolbarBackground(.visible, ...) zeigt den Hintergrund der Leiste immer, nicht erst beim Scrollen.
• .toolbarBackground(.indigo, ...) färbt ihn.
• .toolbarColorScheme(.dark, ...) sorgt für helle Schrift auf dunklem Grund.

Und ganz ausblenden kannst du die Leiste mit .toolbar(.hidden, for: .navigationBar).

Toolbars in Unterseiten

Jede View im Navigationsstapel kann ihre eigene Toolbar haben. Navigiert der Nutzer zur Detailansicht, verschwinden die Einträge der Liste, und die der Detailansicht erscheinen:

struct NoteDetail: View {
    let note: String
    @State private var isFavorite = false

    var body: some View {
        Text(note)
            .navigationTitle(note)
            .toolbar {
                Button("Favorit", systemImage: isFavorite ? "star.fill" : "star") {
                    isFavorite.toggle()
                }
            }
    }
}

Das Symbol wechselt abhängig vom Zustand. Auch das ist einfach eine Beschreibung (Lektion 2.1).

Typische Fehler

Toolbar erscheint nicht

Die View steht nicht in einem NavigationStack, oder .toolbar hängt am NavigationStack statt an der View darin. Wie beim Titel gilt: Modifier an den Inhalt.

Button ohne Titel

Button { addNote() } label: {
    Image(systemName: "plus")
}

Funktioniert, aber VoiceOver liest dann nur „plus, Taste“ vor, oder gar nichts Sinnvolles. Nimm Button("Neu", systemImage: "plus") oder ein Label. Die Leiste zeigt trotzdem nur das Symbol.

Zu viele Elemente

Mehr als zwei, drei Elemente pro Seite der Navigationsleiste werden eng, auf kleinen iPhones schneidet iOS sie ab. Fass Nebenaktionen in einem Menu zusammen.

bottomBar erscheint nicht

Die untere Leiste braucht ebenfalls einen NavigationStack. Bei Apps mit TabView (Lektion 3.21) konkurriert sie außerdem mit der Tab-Leiste.

FAQ

Übungen

struct Note: Identifiable {
    let id = UUID()
    var title: String
}

struct NotesView: View {
    @State private var notes = [Note(title: "Einkaufsliste")]

    var body: some View {
        NavigationStack {
            List {
                ForEach(notes) { note in
                    Text(note.title)
                }
                .onDelete { notes.remove(atOffsets: $0) }
            }
            .navigationTitle("Notizen")
            .toolbar {
                ToolbarItem(placement: .topBarLeading) {
                    EditButton()
                }
                ToolbarItem(placement: .topBarTrailing) {
                    Button("Neu", systemImage: "plus") {
                        notes.append(Note(title: "Notiz \(notes.count + 1)"))
                    }
                }
            }
        }
    }
}

Zusammenfassung

• .toolbar { ... } setzt Elemente in die Navigationsleiste. Es steht an der View im NavigationStack.
• ToolbarItem(placement:) bestimmt die Position: .topBarLeading, .topBarTrailing, .principal, .bottomBar, .keyboard.
• Bedeutungsbasierte Platzierungen wie .confirmationAction und .cancellationAction für Dialoge.
• ToolbarItemGroup fasst mehrere Elemente zusammen, Menu spart Platz.
• Buttons in der Toolbar immer mit Titel, auch wenn nur das Symbol sichtbar ist.
• Jede View im Stapel hat ihre eigene Toolbar.

Spickzettel

.toolbar {
    ToolbarItem(placement: .topBarLeading) { EditButton() }
    ToolbarItem(placement: .topBarTrailing) {
        Button("Neu", systemImage: "plus") { add() }
    }
    ToolbarItemGroup(placement: .bottomBar) {
        Button("Teilen", systemImage: "square.and.arrow.up") { }
        Spacer()
        Button("Löschen", systemImage: "trash") { }
    }
}

Menu("Mehr", systemImage: "ellipsis.circle") {
    Button("Umbenennen") { }
    Button("Löschen", role: .destructive) { }
}