猫でもわかるWebプログラミングと副業

本業エンジニアリングマネージャー。副業Webエンジニア。Web開発のヒントや、副業、日常生活のことを書きます。

【Swift UI】NavigationView を表示させる、NavigationViewにタイトルやボタンを表示させる

f:id:yoshiki_utakata:20191225120619p:plain

NavigationView を表示させる

struct ContentView: View {
    var body: some View {
        NavigationView {
            // ビューの中身をここに書く
        }
    }
}

NavigationView にタイトルを表示させる

struct ContentView: View {
    var body: some View {
        NavigationView {
            // ビューの中身をここに書く

            // NavigationView にタイトルをつける
            // NavigationView{} の中身にこれを書くので注意
            .navigationBarTitle(Text("タイトル"))
        }
    }
}

NavigationView の右上にボタンを設置する

struct ContentView: View {
    var body: some View {
        NavigationView {
            // ビューの中身をここに書く

            // NavigationView の右上にボタンを配置する
            // action と中身を必ず設定しなければならない
            .navigationBarItems(trailing: Button(action: {
                // クリックした時のアクション
            }){
                // ボタンの文字
                Text("設定")
            })
        }
    }
}

詳解 Swift 第5版

詳解 Swift 第5版

  • 作者:荻原 剛志
  • 出版社/メーカー: SBクリエイティブ
  • 発売日: 2019/11/15
  • メディア: 単行本