使用互動式用戶界面元素在多個子檢視之間切換的檢視。也就是手機底部的幾個導航選單一樣，但是注意官方給的例子裡面有使用Tab元件的，但是這個Tab元件注意：暫時只支援beta版本的系統，低版本是沒有的：
TabView提供了一個互動式介面，允許使用者在其內部的子介面間自由的切換，TabView有兩種顯示模式，一個是DefaultTabViewStyle，另一個是PageTabViewStyle，本文將對DefaultTabViewStyle這種型別的基本使用和外觀樣式設定進行一下探索學習。
基本使用
DefaultTabViewStyle型別下的TabView就像我們在UIKit中用到的UITabViewController，可以作為構建App的一個基本根檢視。要建立帶有Tab選項卡的用戶界面，在TabView中新增檢視，並對每個檢視新增tabItem(_:)修飾符即可，比如下面這個簡單的示例：
程式碼：
//
// SwitchTab.swift
// SwiftBook
//
// Created by song on 2024/7/4.
//
import SwiftUI
struct SwitchTab: View {
var body: some View {
TabView {
Color(.red)
.ignoresSafeArea(edges: .top)
.tabItem {
Text("首頁")
Image(systemName: "house.fill")
}
Color(.blue)
.ignoresSafeArea(edges: .top)
.tabItem {
Text("訊息")
Image(systemName: "message.fill")
}
Color(.purple)
.ignoresSafeArea(edges: .top)
.tabItem {
Text("我的")
Image(systemName: "person.fill")
}
}
}
}
#Preview {
SwitchTab()
}
上面程式碼中，我們在TabView中新增了3個檢視，並且給每個檢視都新增了tabItem(_:)修飾符，該修飾符的閉包內支援傳入一個Label元件或者Text元件加Image的組合方式。
不管是哪種方式都不支援外觀的設定。如果用Text和Image組合的方式，新增了除了這兩個元件以外的元件，那也是沒用的，系統只會認新增的第一個Text和第一個Image，其他的都忽略了。
另外可以新增.badge()修飾符，傳入一個字串，如下：
預設badge是紅色背景白色文字。
在建立TabView的時候還支援傳入一個selection值，用來記錄當前選中的tab，當切換tab的時候，selection讀取每個子介面的tag值。下面將程式碼加入tag，並將程式碼進行一下最佳化，首先定義一個TabType列舉，定義好要顯示的介面，包括介面的文字和圖示。
enum TabType: Int, Hashable {
case home
case videos
case message
var title: String {
switch self {
case .home:
return "Home"
case .videos:
return "Videos"
case .message:
return "Message"
}
}
var image: String {
switch self {
case .home:
return "house.fill"
case .videos:
return "video.fill"
case .message:
return "message.fill"
}
}
}
有了這個後body的程式碼最佳化為：
//
// SwitchTab.swift
// SwiftBook
//
// Created by song on 2024/7/4.
//
import SwiftUI
enum TabType: Int, Hashable {
case home
case videos
case message
var title: String {
switch self {
case .home:
return "Home"
case .videos:
return "Videos"
case .message:
return "Message"
}
}
var image: String {
switch self {
case .home:
return "house.fill"
case .videos:
return "video.fill"
case .message:
return "message.fill"
}
}
}
struct SwitchTab: View {
@State private var selectedTab: TabType = .home
var body: some View {
TabView(selection: $selectedTab) {
Color(.red)
.ignoresSafeArea(edges: .top)
.tabItem {
Text("首頁")
Image(systemName: "house.fill")
}
.tag(TabType.home)
Color(.blue)
.ignoresSafeArea(edges: .top)
.tabItem {
Text("訊息")
Image(systemName: "message.fill")
}
.tag(TabType.message)
Color(.purple)
.ignoresSafeArea(edges: .top)
.tabItem {
Text("影片")
Image(systemName: "video.fill")
}
.tag(TabType.videos)
.badge(/*@START_MENU_TOKEN@*/10/*@END_MENU_TOKEN@*/)
}
}
}
#Preview {
SwitchTab()
}
上面定義了TabType型別的selectedTab屬性，預設值是.home，即預設顯示Home介面。我們將selectedTab繫結到TabView中，並對每個子介面新增.tag()修飾符，傳入對應的tag，這裏的tag採用列舉自身的值。
介面切換隻要改變selectedTab的值即可，在Home介面新增了一個Button，點選後跳轉到Message介面，Home介面作為一個單獨的介面，定義如下：
VStack {
Color.red.overlay(content: {
Button(action: {
selectedTab = TabType.message
}, label: {
Text("Go to Message page").padding().background().cornerRadius(10, antialiased: /*@START_MENU_TOKEN@*/true/*@END_MENU_TOKEN@*/)
})
})
}
.frame(width: .infinity, height: .infinity)
.ignoresSafeArea(edges: .top)
.tabItem {
Text("首頁")
Image(systemName: "house.fill")
}
.tag(TabType.home)
Home介面定義了一個@Bingding修飾的selectedTab變數，用來繫結父介面的selectedTab變數，這樣在Home介面改動selectedTab變數，父介面的selectedTab也會改變。
效果圖如下：
樣式設定
與之前的UIKit TabBar類似，選中的Tab預設為藍色，而未選中的為灰色。另外，在UIKit中，整個標籤欄預設有一個背景。
然而，如果想改變顏色來匹配我們自己App的主題，例如，選中是Tab的文字和圖片是其他顏色，以及badge的背景色和顏色等等。
下面我們將使用的UIKit外觀API，來設定TabView的外觀樣式，讓我們看看下面的程式碼。
先說一下，給TabView元件新增.tint()修飾符，可以改變TabItem選中時的顏色，其他的就得靠UIKit的API了。
設定選中的TabItem的顏色
.tint(Color.red) // 設定選中的tabitem的顏色。
設定未選中的TabItem的顏色
UITabBar.appearance().unselectedItemTintColor = .systemBrown
設定badge的背景色
ini複製程式碼UITabBarItem.appearance().badgeColor = .green
設定badge中文字的樣式
UITabBarItem.appearance().setBadgeTextAttributes([.foregroundColor: UIColor.red, .font: UIFont.boldSystemFont(ofSize: 14)], for: .normal) // 未選中時 UITabBarItem.appearance().setBadgeTextAttributes([.foregroundColor: UIColor.blue], for: .selected) // 選中時
設定TabBar的背景色
ini複製程式碼UITabBar.appearance().backgroundColor = .yellow
設定TabItem中文字和圖片的間距和偏移量
ini複製程式碼UITabBarItem.appearance().titlePositionAdjustment = UIOffset(horizontal: 0, vertical: 5)
上面的這些設定，我們可以在初始化元件的時候設定，也可以在.onAppear中設定。
.onAppear {
UITabBar.appearance().unselectedItemTintColor = .systemBrown
UITabBarItem.appearance().badgeColor = .green
UITabBar.appearance().backgroundColor = .yellow
UITabBarItem.appearance().titlePositionAdjustment = UIOffset(horizontal: 0, vertical: 5)
UITabBarItem.appearance().setBadgeTextAttributes([.foregroundColor: UIColor.red, .font: UIFont.boldSystemFont(ofSize: 14)], for: .normal)
UITabBarItem.appearance().setBadgeTextAttributes([.foregroundColor: UIColor.blue], for: .selected)
}
以上就是TabView的基本用法及樣式設定，希望對大家能有所幫助
TabView官方文件：TabView | Apple Developer Documentation
Tab官網文件：Tab | Apple Developer Documentation
