ナビゲーションバータイトル部分の左右にはボタンを配置することができる。
なお、通常はボタンを配置することがほとんどだが、ビューであればどのようなものでも配置することができる。

それでは早速実装例を見ていこう。

ナビゲーションバーの左にボタンを配置する

ナビゲーションバーの左右にボタンを配置する場合はnavigationBarItemsモディファイアを利用する。

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
struct ContentView: View {
    @State var message = "ボタンをタップしてください"
 
    var body: some View {
        NavigationView {
            Text(message).font(.system(size: 20))
                .navigationBarTitle("Welcome")
                .padding()
            .navigationBarItems(
                leading:
                Button(action: {
                    self.message = "Close tapped!"
                }) {
                    Text("Close")
                }
            )
        }
    }
}

バーの左に配置する場合はleadingにビューを指定すれば良い。

今回の例ではCloseボタンを配置し、タップされたらナビゲーションビュー内のTextビューの値を変更する処理を実装している。

Closeボタンをタップすると以下のように切り替わる。

ナビゲーションバーの右に二つのボタンを配置する

次はバーの右側にボタンを配置する例を見ていこう。

右に配置する場合はtrailing内にビューを配置し、今回はHStackを利用して二つのボタンを横並びに表示させてみた。

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
struct ContentView: View {
    @State var message = "ボタンをタップしてください"
 
    var body: some View {
        NavigationView {
            Text(message).font(.system(size: 20))
                .navigationBarTitle("Welcome")
                .padding()
            .navigationBarItems(
                leading:
                Button(action: {
                    self.message = "Close tapped!"
                }) {
                    Text("Close")
                },
                 
                trailing:
                HStack {
                    Button(action: {
                        self.message = "Help tapped!"
                    }) {
                        Text("Help")
                    }
                    Button(action: {
                        self.message = "Info tapped!"
                    }) {
                        Image(systemName: "info.circle")
                    }
                }
            )
        }
    }
}

それぞれのボタンには、先ほどと同じようにタップするとナビゲーションビュー内のTextビューの値を変更する処理を入れている。