iOS 18 からの TabView と Tab

基本形

TabView() {
    Tab("aa", systemImage: "house") {
        Text("AA")
    }
    
    Tab("bb", image: "TestImage") {
        Text("BB")
    }
    
    Tab {
        Text("CC")
    } label: {
        Text("cc")
    }

    Tab {
        Text("DD")
    } label: {
        Label("dd", systemImage: "house")
    }
}

Aのやり方がAppleのサンプルコードでよく出てくるのでApple推奨と判断してよさそう。
自分の画像を使いたいときはBのように出来るが、選択/非選択の状態を色で表現するやりかたを調査中。
Cのやり方も受け付けるが、絵のスペースが空いたまま文字が下の方に表示されるだけ。

値取得形

選択されているタブを取得したい場合。

TabView(selection: $value) {
    Tab("heart", systemImage: "suit.heart", value: 0) {
        Text("Heart")
    }
    Tab("spade", systemImage: "suit.spade", value: 1) {
        Text("Spade")
    }
    Tab("diamond", systemImage: "suit.diamond", value: 2) {
        Text("Diamond")
    }
    Tab("club", systemImage: "suit.club", value: 3) {
        Text("Club")
    }
}

追加情報系

バッジとアクセシビリティ情報を追加できる。

TabView() {
    Tab {
        Text("DD")
    } label: {
        Label("dd", systemImage: "moon")
    }
    .badge(30)
    
    Tab {
        Text("EE")
    } label: {
        Image(systemName: "star.fill")
    }
    .accessibilityLabel("Favorites")
}

中身のみ系

横に移動させて切り替えるときなど。

TabView() {
    Tab {
        Text("Heart")
    }
    Tab {
        Text("Spade")
    }
    Tab {
        Text("Diamond")
    }
    Tab {
        Text("Club")
    }
}
.tabViewStyle(.page)

疑問

タブ内に画像なしで、テキストだけを真ん中に配置する方法。(文字の画像を作成する以外で)

その他

tabItem(_:) は18.2までとなりました。

TabRole は何かわかりません。