SwiftUI TabView 分頁教學

TabView 是 App 中最常見的頂層導航方式，通常位於螢幕底部，讓使用者在不同的主要功能區塊間切換。

基礎 TabView

建立 TabView 很簡單，只需要把每個頁面放進去，並加上 .tabItem 修飾符。

struct ContentView: View {
    var body: some View {
        TabView {
            // 第一頁
            Text("首頁內容")
                .tabItem {
                    Label("首頁", systemImage: "house")
                }
            
            // 第二頁
            Text("設定內容")
                .tabItem {
                    Image(systemName: "gear")
                    Text("設定")
                }
        }
    }
}

控制當前分頁 (使用 Enum 最佳實踐)

雖然可以用 Int 來控制分頁，但使用 Enum 會讓程式碼更具可讀性且更容易維護。

// 定義所有 Tab 選項
enum Tab {
    case home, settings
}

struct ContentView: View {
    @State private var selectedTab: Tab = .home // 儲存當前狀態
    
    var body: some View {
        TabView(selection: $selectedTab) {
            HomeView()
                .tabItem { Label("首頁", systemImage: "house") }
                .tag(Tab.home) // 綁定 Enum
            
            SettingsView()
                .tabItem { Label("設定", systemImage: "gear") }
                .tag(Tab.settings)
        }
    }
}

struct HomeView: View {
    var body: some View {
        VStack {
            Text("這是首頁")
            Button("去設定頁") {
                // 如果這裡需要控制切換，通常會把 selectedTab 傳進來或是用 EnvironmentObject
            }
        }
    }
}

struct SettingsView: View {
    var body: some View {
        Text("這是設定頁")
    }
}

紅點通知 (Badge)

從 iOS 15 開始，我們可以直接使用 .badge() 來顯示未讀通知數量。這在通訊軟體或購物車中非常常見。

TabView {
    Text("訊息")
        .tabItem { Label("Chat", systemImage: "message") }
        .badge(5) // 顯示數字 5
    
    Text("購物車")
        .tabItem { Label("Cart", systemImage: "cart") }
        .badge("New") // 也可以顯示文字
}

PageTabViewStyle (圖片輪播)

TabView 不僅可以用作底部導航，還可以變成類似 Instagram 多張圖片的水平滑動輪播效果。只要加上 .tabViewStyle(.page) 即可。

TabView {
    Color.red
    Color.green
    Color.blue
}
.tabViewStyle(.page)
.indexViewStyle(.page(backgroundDisplayMode: .always)) // 顯示下面的小白點背景

這在製作 App 的「功能介紹 (Onboarding)」或「圖片瀏覽器」時非常實用。

樣式客製化

SwiftUI 原生的 TabView 可客製化程度有限 (主要是改顏色)。如果需要更改 TabBar 的背景色，通常需要使用 UITabBar.appearance() (這是一個 UIKit 的 workaround)。

init() {
    // 修改未選中項目的顏色
    UITabBar.appearance().unselectedItemTintColor = UIColor.gray
    // 修改背景色
    UITabBar.appearance().backgroundColor = UIColor.systemBackground
}

或是使用 .tint(.red) 來改變選中項目的顏色。

總結

• 使用 TabView 建立底部導航。
• 推薦使用 Enum 配合 .tag() 來管理分頁。
• 使用 .badge() 顯示紅點。
• .tabViewStyle(.page) 可變身為輪播圖。