The Util Designer
SwiftUI TabView 的使用
xcode 13.4.1, swift 5.5, iOS 15.4
2022-08-21
TabView是在App使用的比較多的元件之一，這次就講講TabView在SwiftUI的基本使用方法。
1. 以下分別用了三個Text來做每個Tab的按鈕：分別是Tab1, Tab2, Tab3，三個Tab的內容也是Text，其內容分別為：Tab 1 Content 、 Tab 2 Content 和 Tab 3 Content。
import SwiftUI

struct TabViewExample: View {
    var body: some View {
        TabView {
            Text("Tab 1 Content")
                .tabItem {
                    Text("Tab1")
                }
            Text("Tab 2 Content")
                .tabItem {
                    Text("Tab2")
                }
            Text("Tab 3 Content")
                .tabItem {
                    Text("Tab3")
                }
        }
    }
}
2. 也可以使用Label作為TabItem。
import SwiftUI

struct TabViewExample: View {
    var body: some View {
        TabView {
            Text("Tab 1 Content")
                .tabItem {
                    Text("Tab1")
                }
            Text("Tab 2 Content")
                .tabItem {
                    Text("Tab2")
                }
            Text("Tab 3 Content")
                .tabItem {
                    Label("Setting", systemImage: "gear")
                }
        }
    }
}
3. 只要在TabView上把其tabViewStyle設置成PageTabViewStyle，就可以以翻頁的形式來呈現不同的Tab。
import SwiftUI

struct TabViewExample: View {
    var body: some View {
        TabView {
            Text("Tab 1 Content")
                .tabItem {
                    Text("Tab1")
                }
            Text("Tab 2 Content")
                .tabItem {
                    Text("Tab2")
                }
            Text("Tab 3 Content")
                .tabItem {
                    Label("Setting", systemImage: "gear")
                }
        }
        .tabViewStyle(PageTabViewStyle())
    }
}
4. 其實使用了PageTabViewStyle為tabViewStyle是有小圓點指示現在到哪一個Tab了，但因為白色，所以看不到，為了把它顯示出來，需要使用一個indexViewStyle方法設置PageIndexViewStyle，就可以將其顯示出來，實作如下。
import SwiftUI

struct TabViewExample: View {
    var body: some View {
        TabView {
            Text("Tab 1 Content")
                .tabItem {
                    Text("Tab1")
                }
            Text("Tab 2 Content")
                .tabItem {
                    Text("Tab2")
                }
            Text("Tab 3 Content")
                .tabItem {
                    Label("Setting", systemImage: "gear")
                }
        }
        .tabViewStyle(PageTabViewStyle())
        .indexViewStyle(
          PageIndexViewStyle(backgroundDisplayMode: .always))
    }
}
5.現在的TabItem基本上沒有太大的用處，你也可以把其刪除掉。
import SwiftUI

struct TabViewExample: View {
    var body: some View {
        TabView {
            Text("Tab 1 Content")
            Text("Tab 2 Content")
            Text("Tab 3 Content")
        }
        .tabViewStyle(PageTabViewStyle())
        .indexViewStyle(
          PageIndexViewStyle(backgroundDisplayMode: .always))
    }
}
6. TabView 的內容只要符合View就可以，像不同的佈局也可以，實作如下：
import SwiftUI

struct TabViewExample: View {
    var body: some View {
        TabView {
            VStack {
                Rectangle()
                    .foregroundColor(.orange)
                    .padding()
                Rectangle()
                    .foregroundColor(.orange)
                    .padding()
            }
            HStack {
                Circle()
                    .foregroundColor(.blue)
                    .padding()
                Circle()
                    .foregroundColor(.blue)
                    .padding()
            }
            ZStack {
                Capsule()
                    .foregroundColor(.brown)
                    .padding()
                Text("I am a capsule.")
                    .foregroundColor(.yellow)
                    .font(.largeTitle)
            }
        }
        .tabViewStyle(PageTabViewStyle())
        .indexViewStyle(
          PageIndexViewStyle(backgroundDisplayMode: .always))
    }
}