[SwiftUI]TabViewの引数「selection」を使う方法

どうも、ちょげ(@chogetarou)です。

TabViewの引数「selection」を使う方法を紹介します。

方法

TabViewの引数「selection」には、変数を使います。

まず、変数を用意します。

@State var selected = value //valueの型は何でもOK

次に、TabViewの引数「selection」に用意した変数をバインドします。

TabView(selection: $selected) {
  ・・・
}

そして、TabView内のタブにtag修飾子を付与し、tag修飾子内に値を指定します。

TabView(selection: $selected) {
  FirstTab()
    .tag(value1) //tagを付与
  SecondTab()
    .tag(value2)
  ・・・
}

あとは、変数の値を、移動するタブのtag修飾子の値にします。

self.selected = value1 //移動するタブのtag修飾子の値に変更

使用例

struct ContentView: View {
    @State var selected = "First"
    var body: some View {
        TabView(selection: $selected) {
            Text("The First Tab")
                .onTapGesture {
                    self.selected = "Second"
                }
                .tabItem {
                    Image(systemName: "1.square.fill")
                    Text("First")
                }
                .tag("First")
            Text("The Second Tab")
                .onTapGesture {
                    self.selected = "Third"
                }
                .tabItem {
                    Image(systemName: "2.square.fill")
                    Text("Second")
                }
                .tag("Second")
            Text("The Third Tab")
                .onTapGesture {
                    self.selected = "First"
                }
                .tabItem {
                    Image(systemName: "3.square.fill")
                    Text("Third")
                }
                .tag("Third")
        }
    }
}