tags: 釣魚術 SwiftUI

開發筆記

• 我們幾乎是完成了有危險的魚類圖鑑，接下來要製作下一個功能，釣點紀錄的功能。
• 在那之前，不同功能的畫面之間，應該要有方便切換的方式 —— TabView。
• 我的 Xcode 跳出更新，順手將測試的環境也變成 iOS 16.0 了
  
• 下圖底部的「危險魚類、私藏釣點」，即為 TabView
  

實作

TabView

• 到了 Day 9，對於 View 的操作已經逐漸找到規則了，不過在撰寫程式碼的時候最好還是照著文件的內容進行開發，會比用直覺猜測來得精準。
• 程式碼的雛形如下：

TabView {
    xxxView {
        // xxxView 的內容
    }.tabItem {
        Image(systemName: "xmark.shield.fill")
        Text("xxx")
    }
    oooView {
        // oooView 的內容
    }.tabItem {
        Image(systemName: "map.fill")
        Text("ooo")
    }
}

• 上面的 tabView 中，放了圖片，圖片來源是 systemName: 圖片名稱
  • 先參考官方文章 Configuring and displaying symbol images in your UI
  • 其中提到，一些常用的圖片，被收錄在 SF Symbols 中，可以透過 systemName 的方式加到畫面中。
    

重點修改內容

• 由 GitHub 連結參考 本次 commit 的完整內容
• 主要修改內容如下

TabView {
    NavigationView {
        // 加一層 ScrollView
        ScrollView(.vertical) {
            LazyVStack(alignment: .center) {
                ForEach(fishCates, id: \.self) { fishCate in
                    FishCategoryView(
                        fishCate: fishCate,
                        toxicfishes: toxicfishes)
                }
            }
        }
        .navigationBarTitle(Text("危險魚類圖鑑"), displayMode: .inline)
    }
    .tabItem {
        Image(systemName: "xmark.shield.fill")
        Text("危險魚類")
    }
    Text("Location")
    .tabItem {
        Image(systemName: "map.fill")
        Text("私藏釣點")
    }
}

看結果

危險魚類

• 這是先前製作的 NavigationView + ScrollView 的組合
  

私藏釣點

• 尚未實作，因此先以一串文字示意
  

心得

• 開發手機程式的樂趣，就是看他一天一天的長大。

參考資料

• SF Symbols
• TabView