【SwiftUI】タブでViewを切り替える

よくアプリで見かけるような同じカテゴリーのViewを切り分けるタブの実装について記載していきます。
カレンダーアプリやダッシュボードアプリなどで、
モードを切り替えたりする場合に、タブでViewを切り替えるような方法です。

タブのサンプルコード

タブはSwiftUIでは、Picker関数を用いて実装することになります。
Pickerでタブを表示し、そして切り替えた時別のViewを表示することになるので、
@StateによってViewを再構築するようなコードを記載する必要があります。

import SwiftUI

@main
struct AppMain: App {
    
    @UIApplicationDelegateAdaptor (AppDelegate.self) var appDelegate
    
    class AppDelegate: UIResponder, UIApplicationDelegate {
        
            func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey : Any]? = nil) -> Bool {
                return true
            }
        }
        
    var body: some Scene {
        WindowGroup {
            ContentView()
        }
    }
}


struct ContentView: View {

    // デフォルトのタグ
    @State private var selectedIndex = 0
    var body: some View {
        VStack {
            
            Picker("", selection: self.$selectedIndex) {
                Text("First")
                    .tag(0)
                Text("Second")
                    .tag(1)
                Text("Third")
                    .tag(2)
            }
            .pickerStyle(SegmentedPickerStyle())
            if(self.selectedIndex == 0){Text("First View")}
            if(self.selectedIndex == 1){Text("Second View")}
            if(self.selectedIndex == 2){Text("Third View")}
              
        }
    }
}

実際の画面

以下のように表示されます。