Navigationbarの表示

  • 最低限の実装
  • タイトルをつける
  • ボタンを設置する

以下のようにするのが最低限の実装

struct ContentView: View {
    var body: some View {
        NavigationView {
            Text("これはテスト")
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

タイトルを表示する場合

NavigationViewの括弧内に「navigationBarTitle」をセットする。
displayModeはinlineにしないと、文字が大きすぎるため、inlineにセットする

struct ContentView: View {
    var body: some View {
        NavigationView {
            Text("これはテスト")
                .navigationBarTitle("タイトル", displayMode: .inline)
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

実行結果

ボタンを設置する

toolbarを使用して実装を行う。
toolbarの前に何かレイアウトに関するものを書かないといけないらしい。

NavigationView {
    // 画面表示処理
    .toolbar {
        ToolbarItem(placement: .navigationBarTrailing) {
            NavigationLink(destination: [遷移先画面の構造体]){
                Text("テキスト")
            }
        }
    }
}

ToolbarItemのplacementに関して

NavigationBarのどこに設置するかによって、以下のように値を設定する

NavigationBarの左側に設置.navigationBarLeading
NavigationBarの右側に設置.navigationBarTrailing