バッテラが如く

プログラミングしましょ!

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

SwiftUI

はじめに

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

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

基本構文

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

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

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

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

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

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

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

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

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

navigationBarTitleを使います。

..navigationBarTitle("", displayMode: NavigationBarItem.TitleDisplayMode)
  • 第1引数: タイトルの文字列
  • 第2引数: 表示モード※下記表から選択
TitleDisplayMode 表示方法
large
inline
automatic 前回の設定と同じ

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

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

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のフォローもお願いします。