（アーカイブ）【SwiftUI】ナビゲーションバーのボタン配置

2020.08.042022.04.23

本記事で使用しているnavigationBarItems()はiOS14以降では非推奨となっています。
最新の情報はこちらの記事を御覧ください。

ナビゲーションバーにボタンを配置する方法を解説します。

環境

この記事の情報は次のバージョンで動作確認しています。

【Xcode】11.6
【Swift】5.2.4
【iOS】13.6
【macOS】Catalina バージョン 10.15.6

ナビゲーションバーにボタンを配置するには、次のModifierを使用します。

.navigationBarItems(leading: 左側のView)

.navigationBarItems(trailing: 右側のView)

.navigationBarItems(leading: 左側のView, trailing: 右側のView)

ナビゲーションバーの左右に配置するのは通常はボタンですが、実際はViewであればなんでもかまいません。
ボタンを複数並べる場合はHStack()を使います。

struct ContentView: View {

@State private var message = "ボタンをタップしてください"

var body: some View {

NavigationView {

Text(message)

.navigationBarTitle("NavigationBar", displayMode: .inline)

.navigationBarItems(leading:

Button(action: {

self.message = "Searchボタン!"

}) {

Image(systemName: "magnifyingglass")

trailing:

HStack {

Button(action: {

self.message = "trashボタン!"

}) {

Image(systemName: "trash")

}

Button(action: {

self.message = "Cancelボタン!"

}) {

Text("Cancel")

}

)

}