/

如何在 SwiftUI 中創建 Tab View

如何在 SwiftUI 中創建 Tab View

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

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
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。