この記事では、SwiftUIのTabViewをtag番号で遷移させる方法を紹介します。
◆動作検証環境
・ローカル環境：mac Catalina
・XCode：12.1
・SwiftUI：2.0
・XCode：12.1
・SwiftUI：2.0
スポンサードリンク
必要最低限のコードでのTabView記述
tabViewを最低限のコードで記述すると下記の方法で行う事ができます。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | struct ContentView: View { var body: some View { TabView{ HomeView() .tabItem{ Text("HOME") } LogoutView() .tabItem{ Text("LOGOUT") } } } } |
この場合、TabView間のViewを遷移するにはタブをタップする必要があり、他のイベントと組み合わせた遷移が行えません。
そこで、各Viewにtagを設定し遷移させる方法を行います。
tagの番号に対応したTabView記述
まず、ObservableObjectプロトコルに適合させたクラスを準備し、tagの番号に対応する変数を作ります。
1 2 3 4 5 | class AppState: ObservableObject { @Published var selectedTabNumber: Int = 2 ... |
そして、TabViewの引数にselection として、さきほど作った変数を定義します。
TabView(selection: $appState.selectedTabNumber)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | struct ContentView: View { @EnvironmentObject var appState: AppState var body: some View { TabView(selection: $appState.selectedTabNumber){ HomeView() .tabItem{ Text("HOME") }.tag(1) LogoutView() .tabItem{ Text("LOGOUT") }.tag(2) } } } |
こうする事により、selectedTabNumber が変わるごとに再描画され、TabView内のViewの遷移が可能となります。
以上、SwiftUIのTabViewをtag番号で遷移させる方法を紹介しました。