[Lesson1-3]NavigationViewを使ってタイトル表示などをしてみる

・はじめに

このシリーズは自分自身の学習記録を自分が後に振り返れるように記録していく事が目的です。よって”見やすく”と言う観点では作成されていません。しかし、私自身の成長と後の成果が、この記録に大きな意味をもたらしてくれると思いStudyLog＝SLogを始めようと思い始めました。この記録が技術的な事はもちろん、他の要因でも、いつか誰かの役にたてば幸いです。また私の成長記録も暖かい目で見て頂けると嬉しいです。では早速本日の記録をスタートしていきましょう！

・NavigationViewの使い方

前回のFormでは簡単にリストを作成しましたがiPhone 11では、そのリストをスワイプすると、ステータスバーに被ってしまいます。これではデザイン的によく無いので解消するのと同時にセッションにもタイトルを付けていきたいのでそれらを実装してみます。
一般的な方法は、画面の上部にナビゲーションバーを配置することです。
ナビゲーションバーにはタイトルとボタンを含めることができ、SwiftUIでは、ユーザーがアクションを実行したときに新しいビューを表示することもできます。
ナビゲーションバーを追加してタイトルを付ける方法は下記にて説明します。

import SwiftUI


struct ContentView: View {
   var body: some View {
        NavigationView {
            Form {
                Section {
                    Text("Hello World")
                }
            }
        }
    }
 }
struct ContentView_Previews: PreviewProvider {
   static var previews: some View {
       ContentView()
   }
}

このようになります。

またタイトルをつけるには

import SwiftUI


struct ContentView: View {
   var body: some View {
        NavigationView {
            Form {
                Section {
                    Text("Hello World")
                }
            }
           .navigationBarTitle(Text("SwiftUI"))
        }
    }
 }
struct ContentView_Previews: PreviewProvider {
   static var previews: some View {
       ContentView()
   }
}

NavigationViewに対して、.navigationBarTitle(Text("SwiftUI"))でタイトルを追加する事ができます。

また文字の大きさも調整できます。

.navigationBarTitle("SwiftUI", displayMode: .inline)

inlineでは小さくなりますが.largeでは大きくなります。

import SwiftUI


struct ContentView: View {
   var body: some View {
        NavigationView {
            Form {
                Section {
                   Text("Lesson1-1")
                   Text("Lesson1-2")
                   Text("Lesson1-3")
                }
                Section {
                  Text("Lesson2-1")
                  Text("Lesson2-2")
                  Text("Lesson2-3")
               }
            }
            .navigationBarTitle("SwiftUI", displayMode: .large)
        }
    }
 }
struct ContentView_Previews: PreviewProvider {
   static var previews: some View {
       ContentView()
   }
}

こんな風に表示できます。

本時は以上です。

以上NavigationViewでした。