SwiftUI_ui_navigationbar

ヘッダーをつけよう

アプリでよくあるヘッダーをつけてみましょう。
iOS では、このヘッダーを NavigationBar と呼びます。

実装してみよう

以下のような、テキストがあるだけのページにヘッダーをつけましょう。

import SwiftUI

struct ContentView: View {
  var body: some View {
     Text("Hello, Header")
  }
}

とは言っても簡単で、NavigationView で囲んであげるだけです。
そのあとは、NavigationView ではなく、その中の要素に対して NavigationBar の設定を書いていきます。

import SwiftUI

struct ContentView: View {
  var body: some View {
    NavigationView {
      Text("Hello, Header")　　// 中の要素に対して設定を書いていく
        .navigationBarTitleDisplayMode(.inline)   // ヘッダーの表示設定
        .navigationTitle("タイトル")  // ヘッダーのタイトル 
    }
  }
}

これで、以下のようにヘッダーがつきました！簡単ですね。

カスタマイズしよう

他にも様々な表示設定があるので、以下を参照してください。

【SwiftUI】NavigationViewの使い方