SwiftUI | TabViewのタブを非表示にする方法

View

2024.11.092024.11.05

SwiftUIでTabViewのタブを非表示にする方法を説明する。

Swift 5.7 / Xcode 14.0 / iOS 16.0

結論

.toolbar(.visible, for: .tabBar) と設定する。

具体例

ボタンをタップするとタブの表示 / 非表示が切り替わるAppを作成する。

コード

TabViewを作成する。
タブの中身ビューを作成する。
タブの表示を切り替えるための変数を用意する。
ボタンをタップすると.toolbar(.visible, for: .tabBar)と、.toolbar(.hidden, for: .tabBar) が切り替わるようにする。

import SwiftUI

struct ContentView: View {
    var body: some View {
        TabView {                                          // ? 1
            タブの中身ビュー()
                .tabItem {
                    Image(systemName: "play.square")
                    Text("play")
                }
            タブの中身ビュー()
                .tabItem {
                    Image(systemName: "appletv")
                    Text("TV")
                }
            タブの中身ビュー()
                .tabItem {
                    Image(systemName: "network")
                    Text("network")
                }
            タブの中身ビュー()
                .tabItem {
                    Image(systemName: "icloud")
                    Text("icloud")
                }
        }
    }
}

struct タブの中身ビュー: View {                               // ? 2
    @State var タブの表示: Visibility = .visible             // ? 3
    var body: some View {
        Button("タブを表示/非表示") {
            if タブの表示 == .visible {
                タブの表示 = .hidden
            } else {
                タブの表示 = .visible
            }
        }
        .buttonStyle(.borderedProminent)
        .toolbar(タブの表示, for: .tabBar)                   // ? 4
    }
}