When I create a SwiftUI toolbar item with placement of .keyboard on iOS 26, the item appears directly on top of and in contact with the keyboard. This does not look good visually nor does it match the behavior seen in Apple's apps, such as Reminders. Adding padding to the contents of the toolbar item only expands the size of the item but does not separate the capsule background of the item from the keyboard. How can I add vertical padding or spacing to separate the toolbar item capsule from the keyboard?
Hello all,
Please try using the recommendations above. I was able to achieve a button in the expected location using safeAreaBar(edge:alignment:spacing:content:) with the following code:
struct ContentView: View {
@State private var text = ""
@FocusState private var focused: Bool
var body: some View {
TextField("", text: $text)
.focused($focused)
.frame(maxHeight: .infinity, alignment: .top)
.safeAreaBar(edge: .bottom) {
Button("Add", systemImage: "plus") {}
.labelStyle(.iconOnly)
.buttonStyle(.borderedProminent)
.buttonBorderShape(.circle)
.controlSize(.large)
.padding(.bottom, 16)
}
.onAppear { focused = true }
}
}
Take a look:
I hope this helps!
Travis