第 35 章
標籤視圖的運用與自訂標籤列

在現今最流行的 App中，例如 Facebook、Instagram 和 Twitter，你不難發現它們都使用標籤介面。 這種介面在App底部會出現一個標籤欄，讓使用者可以在不同功能之間快速切換。 如使用 UIKit ，您可以利用UITabBarController 來建立標籤欄界面。 SwiftUI 框架則提供了一個名為TabView的 UI 組件，供開發者在App製作標籤介面。

在本章中，我們將向你解構 TabView 並建立標籤欄界面、處理標籤選擇以及自訂標籤欄的外觀。

使用 TabView 建立標籤欄界面

假設您已經使用 Xcode 開啟了一個 SwiftUI 項目，讓我們從一個簡單的Text視圖開始，如下所示：

struct ContentView: View {
    var body: some View {
        Text("Home Tab")
            .font(.system(size: 30, weight: .bold, design: .rounded))
    }
}

要將這個文字視圖嵌入到標籤列中，只需要使用 TabView 元件將它包裹起來，並建立一個 Tab 項目，如下所示：

struct ContentView: View {

    var body: some View {
        TabView {
            Tab {
                Text("Home Tab")
                    .font(.system(size: 30, weight: .bold, design: .rounded))
            } label: {
                Label("Home", systemImage: "house.fill")
            }
        }
    }
}

這會建立一個具有單一標籤項目的標籤列，該項目的名稱為 Home。在範例程式碼中，這個標籤項目同時包含圖片和文字。

要顯示更多選項，您只需在 TabView 中添加子視圖，如下所示：

想更深入學習SwiftUI和下載完整程式碼？你可以從 AppCoda網站購買《精通 SwiftUI》完整電子版。