SwiftUI 2-1-2. Navigationに子Viewを入れる

ナビゲーションを使うと複数の画面の行き来がしやすくなります。これまではContentViewのみでしたが、Navigationを使って複数の画面を扱えるようにします。手始めとしてNavigationViewの1つめの画面を作ります。

• 前回のコードに続けて書く

• 新しい画面用のswiftファイルを追加する

  • ファイルリストで右クリック, New Fileを選択して新しいファイルを作る
  • File.swiftという名前を FirstView.swift に変更する

ファイルの追加

名前の編集

File.swift > FirstView.swiftへ変更

• FirstView.swift を開く
  • var body : some View { … } を記述
  • 以下のコードを参照

コード1

1
2
3
4
5
6
7
8
9

import SwiftUI

struct FirstView: View {
    var body: some View {
        VStack {
            Text( "はじめのページです" )
        }
    }
}

作成したFirstViewが一つ目の画面です。これをNavigationStackの中に表示してみましょう。

• ContentView.swiftを開き, 前ページで作成したFirstViewを使うよう書き換える
  • NavigationStackの中にVStack, その中にFirstView()を書く
  • FirstView()に.navigationTitleを追加する

プレビューでNavigationStackの中に、FirstViewの記述が反映されていることを確認してください。

コード2

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

import SwiftUI

struct ContentView: View {
    var body: some View {
        NavigationStack {
            VStack {
                FirstView()
                .navigationTitle( "Firstビュー" )
            }
        }
    }
}

結果