History
Loading...
Loading...
September 8, 2025
ToolbarTitleDisplayMode with .inline to save vertical space when your view contains scrollable content. Combine with .toolbarBackground(.visible) to ensure proper contrast during scroll transitions.This pattern creates context-sensitive toolbar items that appear and disappear based on the current state, providing users with relevant actions only when they're needed. The toolbar dynamically adapts to show edit controls, action buttons, and status information.
struct DocumentView: View {
@State private var isEditing = false
@State private var selectedItems: Set<String> = []
var body: some View {
NavigationView {
ContentView()
.toolbar {
ToolbarItem(placement: .navigationBarTrailing) {
if isEditing {
Button("Done") {
isEditing = false
selectedItems.removeAll()
}
} else {
Button("Edit") {
isEditing = true
}
}
}
ToolbarItem(placement: .bottomBar) {
if isEditing && !selectedItems.isEmpty {
HStack {
Button("Delete") { deleteSelected() }
.foregroundColor(.red)
Spacer()
Button("Share") { shareSelected() }
}
}
}
ToolbarItem(placement: .status) {
if isEditing {
Text("\(selectedItems.count) selected")
.font(.caption)
}
}
}
}
}
}Context-aware toolbars reduce cognitive load by showing only relevant actions, prevent accidental interactions with destructive actions when not in edit mode, and provide better visual hierarchy by utilizing different toolbar placements for different types of actions.