tags: 釣魚術 SwiftUI

開發筆記

• 學習 Swift 的第一週，感覺好像正在進行隕石式開發...真的芭比Ｑ惹
  
• 昨天去吃喜酒，第一次去福華...吃了好多好多海鮮（好奢侈），今天頭好暈，希望不是確診...
  
• 由於魚種眾多，資料量也不少，處理圖片有點麻煩，我打算一天做一點。

實作部分

踩雷

• 根據 Figma 畫出的樣子，處理好 FishRect 的樣式區塊後，接著我預計根據不同魚的分類 fishCategory 去區隔
  
  • Array 的 ForEach ... 那個 continue 不會用，來看看文件
    
  • 連結：https://developer.apple.com/documentation/swift/array/foreach(_:)
  • 上面寫 You cannot use a break or continue statement ...
• 原本想說用一個回圈掃一次所有的魚，統計一下有哪些魚魚家族，不過這塊我先跳過；我先手動產生魚魚家族的名單在 ToxicFish.swift ...

swift 限制 / 參考資料

1. 彼得潘的 iOS App Neverland - 程式寫錯地方的 Expressions are not allowed at the top level 和 Expected declaration
2. Stack Overflow - Array not contains 的用法
   • https://stackoverflow.com/questions/30965301/swift-doesnotcontain-method-for-array
   • https://stackoverflow.com/questions/24102024/how-to-check-if-an-element-is-in-an-array

ToxicFish.swift source code

//
//  ToxicFish.swift
//  BaoAnGongFisher
//
//  Created by nipapa on 2022/9/9.
//

import Foundation

struct FishRect: Hashable {    // 放置魚資訊的方塊
    var fishName:String    // 魟、虎、沙毛、斑午、象耳、倒吊
    var fishCategory:String    // 魟
    var fishNickName:[String]    // 赤魟
    var imageName:String {return fishName}    // 赤土魟 ...
}

var toxicFishesData = [
    FishRect(fishName: "赤魟", fishCategory: "魟", fishNickName: ["赤土魟", "紅魴魚", "牛尾魴"]),
    FishRect(fishName: "黃魟", fishCategory: "魟", fishNickName: ["笨氏土魟", "黃魴", "紅魴"]),
    FishRect(fishName: "花身鯻", fishCategory: "斑午", fishNickName: ["花身雞魚", "花身仔", "雞仔魚", "斑午"]) // 花身鯻
]

var fishCates = ["魟", "斑午"]

ToxicFishViewList.swift source

//
//  ContentView.swift
//  BaoAnGongFisher
//
//  Created by nipapa on 2022/9/7.
//

import SwiftUI


struct ToxicFishListView: View {
    var toxicfishes = toxicFishesData
    
    var body: some View {
        VStack{
            // Top Bar
            HStack{
                Text("危險魚類")
                    .padding()
                    .font(.title)
                    .frame(alignment: .topLeading)
                    //.background(Color(hue: 0.555, saturation: 1.0, brightness: 1.0, opacity: 0.21))
                Spacer()
            }.background(Color(hue: 0.555, saturation: 1.0, brightness: 1.0, opacity: 0.21))
            
            ForEach(fishCates, id: \.self) { fishCate in
                VStack {
                    HStack {    // Category name / spacer
                        Text(fishCate)
                          .frame(width: 50, height: 15, alignment: .leading)
                          .background(Color(hue: 0.555, saturation: 1.0, brightness: 1.0, opacity: 0.21))
                        Spacer()
                    }
                    
                    List(toxicfishes, id: \.self) { toxicfish in
                        // Fish Rectangle
                        if toxicfish.fishCategory == fishCate {
                            HStack {    // 有毒的魚，會以水平方式堆疊其他元件
                                // 最左邊放一張圖片
                                Image(toxicfish.imageName)
                                // 放一個垂直堆疊
                                VStack {
                                    // 魚的名字
                                    Text(toxicfish.fishName)
                                        .font(.headline)
                                        .fontWeight(.bold)
                                    // 魚的俗名，把 [String] join 成一個大的字串
                                    Text(toxicfish.fishNickName.joined(separator: "、 "))
                                }
                                // 塞 Spacer 填滿
                                Spacer()
                            }
                        }
                    }
                }
            }
        }
    }
}

struct ToxicFishListView_Previews: PreviewProvider {
    static var previews: some View {
        ToxicFishListView()
        ToxicFishListView()
            .preferredColorScheme(.dark)
    }
}

心得

• 覺得排版還是長得不太好看
• 暫時標上底色可以協助我去辨認該元件的大小，或許對於習慣開發的人來說這有點蠢ＸＤ