SwiftUI: TabViewを使って2つのViewをスワイプ動作で切り替える

自分用の時刻表アプリを作ろう、という記事を書いた時に、往路と復路の時刻表画面をスワイプ動作で切り替えられたらいいな、と思ったのでやってみました。

Viewを2つ用意します。

Sub1View.swift

import SwiftUI

struct Sub1View: View {
    var body: some View {
        Text("This is Sub1View")
    }
}

struct Sub1View_Previews: PreviewProvider {
    static var previews: some View {
        Sub1View()
    }
}

Sub2View.swift

import SwiftUI

struct Sub2View: View {
    var body: some View {
        Text("This is Sub2View")
    }
}

struct Sub2View_Previews: PreviewProvider {
    static var previews: some View {
        Sub2View()
    }
}

次に、ContentViewを以下のようにします。

struct ContentView: View {
    var body: some View {
        TabView {
            Sub1View()
                .tabItem {}.tag(1)
            Sub2View()
                .tabItem {}.tag(2)
        }.tabViewStyle(.page)
    }
}

.tabItemを空にして、.tabViewStyleを.pageにすると、Tabの表示が消えて、スワイプ動作でSub1ViewとSub2Viewが切り替わるようになります。

.on(〇〇)に注意

Viewが一つしかない場合は気にしないでよかったのですが、複数のViewを行ったり来たりするようになるとViewの.on(〇〇)の扱いに注意が必要です。例えば.onAppearに起動時の処理を記述しているような場合。コードを以下のようにしてみるとわかるのですが、Viewが切り替わるたびに、.onAppearが呼び出されていることがわかります。.onAppearに起動時に一回だけやる(べき)処理を記述している場合などは注意が必要です。

struct Sub1View: View {
    var body: some View {
        VStack {
            Text("This is SubView1")
        }.onAppear(){
            print("SubView1 .onAppear called!")
        }
    }
}

起動時に1回だけやる処理をどこに記述すべきか、を以下の記事に書きました。

以下の環境で、動作を確認しました。
MacOS Monterey 12.5.1
Xcode 13.4.1