在 iOS 應用中,使用 Tab View 是很常見的。它位於底部並帶有幾個選項,你可以通過點擊圖標/標籤完全切換屏幕內容。

SwiftUI 便捷地為我們提供了一個名為 TabView 的視圖,使得實現這種 UI 模式變得簡單。

以下是一個最簡單的 TabView 的示例:

import SwiftUI

struct ContentView: View {
 
 var body: some View {
 TabView {
 Text("First")
 .tabItem {
 Label("First", systemImage: "tray")
 }

 Text("Second")
 .tabItem {
 Label("Second", systemImage: "calendar")
 }
 }
 }
}

這是運行結果:

看到了嗎?我們有一個 TabView 視圖,裡面有兩個子視圖。

這兩個子視圖都是為了簡單起見而使用的 Text 視圖。

它們的 tabItem 修改器會將它們作為 Label 視圖放入 TabView 中。

當然,在大多數情況下,你會希望使用自定義視圖而不是 Text