【SwiftUI】NavigationViewの基本的な使い方

はじめに

NavigationViewについてまとめた記事です。

StoryboardにあったNavigationControllerとは全く別物になっています。

参考にした書籍

基本構文

全体を囲むようにして使います(下コード参照)

    var body: some View {
        NavigationView {
            VStack {
                
            }
            .navigationBarTitle("タイトル", displayMode: .inline)
        }                
    }

これだれでこのように表示されます。

モディファイアをかける場所に注意

ここが一番つまづくポイントなんですが、

NavationViewに対してのモディファイアはしないということ。

サンプルコードでいうとVStackなどに対して.navgationXXXXしていきます。

ここが一番間違えやすいポイントなので覚えておきましょう。

ヘッダータイトルを表示する

navigationBarTitleを使います。

..navigationBarTitle("", displayMode: NavigationBarItem.TitleDisplayMode)

• 第１引数： タイトルの文字列
• 第２引数： 表示モード※下記表から選択

TitleDisplayMode	表示方法
large
inline
automatic	前回の設定と同じ

残念な事に２つのパターンしかないです。文字サイズも調整できなさそうです。

ヘッダーの右側にボタンを配置

navigationBarItemsを使います。

VStack{
    
    // SomeView()
}
.navigationBarTitle(Text("タイトル"), displayMode: .inline)
.navigationBarItems(trailing: Button(action: {
    // ボタン押した時の処理
}){
    Image(systemName: "trash")
})

ヘッダーの左側にボタンを配置

VStack{
    
    // SomeView()
}
.navigationBarTitle(Text("タイトル"), displayMode: .inline)
.navigationBarItems(leading: Button(action: {
    // ボタン押した時の処理
}){
    Image(systemName: "trash")
})

trailingのところをleadingにすると左側に配置できます。

おわりに

最後まで見ていただきヘペトナス！

読者登録・Twitterのフォローもお願いします。