Photo by Roell de Ram on Unsplash

客串演出：東堂葵

跟我一起大聲唸下面咒文

TabView or Tab bars is container view that provides an easy way to navigate between multiple child views.

You can access each view in a tab from a tab item, which sits at the bottom of the screen.

這招式叫做 不義遊戲 SwiftUI TabView

Create a new HomeView SwiftUI file.

把 ContentView 裡程式碼搬去 HomeView。

把 ContentView 改寫如下：

struct ContentView: View {
    var body: some View {
        VStack {
            Text(verbatim: "Water boys")
                .font(.largeTitle)
                .fontWeight(.heavy)
                .foregroundColor(.primary)
            
            TabView {
                HomeView().tabItem {
                    NavigationLink(destination: HomeView()) {
                        Label("Home", systemImage: "house")
                    }.tag(1)
                }
                SwimmingStrokesList().tabItem {
                    NavigationLink(destination: SwimmingStrokesList()) {
                        Label("List", systemImage: "list.clipboard.fill")
                    }.tag(1)
                }
            }
        }
    }
}

Tips: TabView 在 Canva 可以互動耶~

啊？今天中秋烤肉局我的玉米烤太久了，要顧一下：

請 Chat-GPT 4 🤖

介紹以下 SwiftUI term ：
TabView
tabItem
NavigationLink
tag

1. TabView

   • TabView 是 SwiftUI 中的一個組件，用於實現具有多個標籤的使用者介面。它與 UIKit 中的 UITabBarController 有點相似。您可以在 TabView 中放置多個 views，並為每個 view 定義一個 tabItem。

     TabView {
         Text("首頁").tabItem {
             Image(systemName: "house")
             Text("首頁")
         }
         Text("設定").tabItem {
             Image(systemName: "gear")
             Text("設定")
         }
     }
     
     

2. tabItem

   • tabItem 是一個修飾符，它用於在 TabView 中定義每個 tab 的內容（通常是一個圖標和文字）。如上所示，您可以使用 Image 和 Text 組件在每個 tab 中顯示圖標和文字。

3. NavigationLink

   • NavigationLink 是用於在 SwiftUI 中實現導航的組件。它允許用戶從一個 view 導航到另一個 view。當用戶點擊 NavigationLink 時，目標 view 將被推送到導航堆棧上。

     NavigationView {
         NavigationLink(destination: Text("詳細視圖")) {
             Text("點擊這裡查看詳細資訊")
         }
     }
     
     

4. tag

   • 在 SwiftUI 中，tag 修飾符通常與某些組件一起使用，例如 Picker，以便可以唯一地標識每個選項。當與 @State 或 @Binding 一起使用時，它可以幫助您跟踪當前選中的選項。

     @State private var selectedNumber = 0
     
     Picker("選擇一個數字", selection: $selectedNumber) {
         Text("0").tag(0)
         Text("1").tag(1)
         Text("2").tag(2)
     }
     
     

玉米烤太久了，會變爆米花嗎 ?

SwiftUI TabView 下集待續