tags: 釣魚術 SwiftUI

開發筆記

回顧與分析

• 昨天我們因為加入了新的魚，五張魚卡/四種魚分類之後，導致佈局很奇怪...
• 因為畫面中四種魚分類(FishCategoryView)，每一種魚分類的外圈，都是 VStack ... 這會導致畫面被平均分割成數塊 VStack，並且在魚分類裡面是 List
  • 示意圖如下：三種魚分類
    
  • 同上圖，標記顏色，說明如下
    
    • 紅框：每一個 VStack
    • 橘框：每個 List
    • 綠框：昨天我們針對每個 魚分類 整併成 NavigationView 之 .navigationTitle(fishCate)
    • 備註：參考昨日原始碼

改善工程

• 首先，我需要上下滑動的畫面！！ 向我心目中，最會料理的男人致敬！！
  
• 再來，把會重複出現的結構抽出來...可以迭代的東西也抽出來... Extract Subview 用起來！！
  • 後來我決定留下一個 NavigationView 就好
  • 裡面那層魚分類抽出，使它叫做 FishCategoryView

struct FishCategoryView: View {
    var fishCate: String
    var toxicfishes: [FishRect]
    
    var body: some View {
        HStack {
            Text(fishCate).font(.system(size: 40))
            Spacer()
        }
        .padding(.leading, 20)
        
        VStack {
            //List(toxicfishes, id: \.self) { toxicfish in    // 每一種魚
            ForEach(toxicfishes, id: \.self) { toxicfish in
                // Fish Rectangle
                if toxicfish.fishCategory == fishCate {
                    FishCardView(
                        imgName: toxicfish.imageName,
                        fishName: toxicfish.fishName,
                        fishNickName: toxicfish.fishNickName)
                }   // end of 每一種魚
            }
            .listRowSeparator(.hidden)
        }
    }
}

https://developer.apple.com/documentation/swiftui/lazyvstack

結果

• 原本我取名的「有毒魚類圖鑑」，因為深入研究後發現釣魚師父講的口訣中，部分魚是無毒，但是漁民特別放在裡面的。因此我後來讓這個圖鑑叫做「危險魚類圖鑑」
• 操作影片/連結如下：
  • https://youtube.com/shorts/PBSpg7U--Ek?feature=share
    {%youtube PBSpg7U--Ek %}
    
• 如果您好奇其他的部分，就參考 GitHub 吧！！

心得

• 無關鐵人賽，我覺得最近生活有點複雜，想要去釣魚了。
• 關於開發，利用零碎的時間胡搞瞎搞，元件好多，寫完的時候應該超過三十篇了我猜。
• 寫程式碼也是需要斷捨離的，不用捨不得前幾天寫的內容，大概就是這樣。

參考資料

• LazyVStack 官方文件