iOS14で導入された機能で、NavigationViewの上部、または下部のツールバーにボタンやテキストを配置することができます。
また、iOS15では表示位置に keyboard を指定することができるようになり、ソフトウェアキーボードのツールバーにウィジェットを配置することができるようになりました。
公式ドキュメント: https://developer.apple.com/documentation/swiftui/modifiedcontent/toolbar(items:)
上部右端にボタンを配置する
NavigationView {
Text("右上に配置")
.toolbar {
Button {
print("...")
} label: {
Text("保存")
}
}
}
上部左端にボタンを配置する
ToolbarItem の placement で位置を指定します（デフォルトは右上）
NavigationView{
Text("左上に配置")
.toolbar {
ToolbarItem(placement: .navigationBarLeading) {
Text("leading")
}
}
}
}
下部中央にボタンを配置する
Text("下部中央に配置")
.toolbar {
ToolbarItem(placement: .bottomBar) {
Button {
print("...")
} label: {
Text("保存")
}
}
}
下部左端（または右端）にボタンを配置する
Spacer を使用します。Toolbar に複数のウィジェットを配置する場合は ToolbarItemGroup を利用すると便利です。
Text("下部左端に配置")
.toolbar {
ToolbarItemGroup(placement: .bottomBar) {
Button {
print("...")
} label: {
Text("保存")
}
Spacer()
}
}
右端に表示する場合は Button の下にある Spacer() を上に移動させるだけです。
ちなみに ToolbarItemGroup なしだと下記のように書きます。
Text("下部左端に配置")
.toolbar {
ToolbarItem(placement: .bottomBar) {
Button {
print("...")
} label: {
Text("保存")
}
}
ToolbarItem(placement: .bottomBar) {
Spacer()
}
}キーボードの上にカスタムヘッダーとして表示する
struct ContentView: View {
@State var text: String = ""
var body: some View {
TextField("名前", text: $text)
.toolbar {
ToolbarItem(placement: .keyboard) {
Text("keyboard")
}
}
}
}