在 SwiftUI 中使用 TabView 是一個非常實用的功能，讓開發者能夠在一個畫面中輕鬆顯示多個頁面並在它們之間切換。本文將介紹如何在 SwiftUI 中使用 TabView 來創建一個多標籤的應用程序，並提供完整的 2025 最新語法與最佳實踐。

創建 TabView

首先，我們需要創建一個 TabView，它可以包含多個標籤，每個標籤都對應一個視圖。TabView 的創建非常簡單，只需使用 TabView 類型的初始化方法，並將要顯示的視圖傳入即可：

struct ContentView: View {
    var body: some View {
        TabView {
            Text("First View")
                .tabItem {
                    Image(systemName: "1.circle")
                    Text("First")
                }
            Text("Second View")
                .tabItem {
                    Image(systemName: "2.circle")
                    Text("Second")
                }
            Text("Third View")
                .tabItem {
                    Image(systemName: "3.circle")
                    Text("Third")
                }
        }
    }
}

上面的代碼將創建一個包含三個標籤的 TabView，每個標籤都對應一個文本視圖，當你選擇不同的標籤時，對應的視圖就會顯示出來。

設置標籤的標題和圖標

當你創建了 TabView 後，可以使用 tabItem 修飾符來為每個標籤設置標題和圖標：

Text("First View")
    .tabItem {
        Image(systemName: "1.circle")
        Text("First")
    }

這段代碼為每個標籤設置了圖標和標題，讓使用者在不同的標籤之間切換時能夠更直觀地辨識。

設置默認標籤

你可以使用 @State 屬性來設置默認顯示的標籤：

struct ContentView: View {
    @State private var selectedTab = 1

    var body: some View {
        TabView(selection: $selectedTab) {
            Text("First View")
                .tabItem {
                    Image(systemName: "1.circle")
                    Text("First")
                }
                .tag(1)
            Text("Second View")
                .tabItem {
                    Image(systemName: "2.circle")
                    Text("Second")
                }
                .tag(2)
            Text("Third View")
                .tabItem {
                    Image(systemName: "3.circle")
                    Text("Third")
                }
                .tag(3)
        }
        .onAppear {
            self.selectedTab = 2 // 設置默認顯示的標籤
        }
    }
}

上面的代碼將默認顯示的標籤設置為第二個標籤，也就是 Second View。

錯誤排除與最佳實踐

在開發過程中，你可能會遇到一些常見的錯誤，例如標籤的索引設定不正確，或是無法切換標籤。確保每個標籤都有其對應的 tag，這樣才能正確地與 selectedTab 屬性進行綁定。

延伸應用

你可以進一步擴展 TabView 的功能，例如在每個標籤中嵌入不同的視圖組合，甚至使用 NavigationView 來實現更複雜的視圖結構。以下是一個簡單的實作範例，展示如何將 TabView 與 NavigationView 結合使用：

struct ContentView: View {
    var body: some View {
        TabView {
            NavigationView {
                Text("First View")
            }
            .tabItem {
                Image(systemName: "1.circle")
                Text("First")
            }
            
            NavigationView {
                Text("Second View")
            }
            .tabItem {
                Image(systemName: "2.circle")
                Text("Second")
            }
        }
    }
}

這樣可以讓每個標籤中的視圖更具互動性，提升用戶體驗。

結論

在這篇文章中，我們介紹了如何在 SwiftUI 中使用 TabView 來創建一個多標籤的應用程序。我們學習了如何創建 TabView，為每個標籤設置標題和圖標，以及如何設置默認顯示的標籤。透過這些步驟，你可以輕鬆地在不同的視圖之間切換，增強應用程序的可用性。

在 SwiftUI 中使用 TabView

常見問題解答 (Q&A)

1. TabView 如何保持狀態？

在 SwiftUI 中，每個標籤的狀態會自動保持。你可以使用 @State 或 @ObservedObject 來管理狀態。

2. 如何添加動態內容到 TabView 中？

你可以將數據來源與 TabView 結合，使用 ForEach 將動態內容添加到每個標籤中。

3. TabView 支援哪些自訂樣式？

TabView 支援多種樣式，如 .page 和 .tabBar，你可以根據需求進行自訂。

—

Categorized in:

iOSswift

Tagged in:

,