tags: 釣魚術 SwiftUI

認識魚

• 接續前一篇提到的「斑午魚」，指的便是花身鯻（ㄌㄚˋ），常被稱作“花身”、“花身雞”；花身本身沒有毒，但是他的鰭和鰓蓋邊邊都有硬刺，而且這個魚很貪吃，在捕抓的時候一不小心就會被次受傷，因此被放在第四位。

  

  圖： 吃小烏賊的小花身；三排小卷的三排，指的是放在塑膠盒裡面可以擺滿三排 (大園區沿海、6錢沈底釣法 2022.08.14)

  

  圖： 夕燒 (大園區沿海 2022.08.14)

  

  圖： 吃小鬍鬚蝦的花身 (八里區護城河、1.0錢浮標釣法 2022.07.07)

製作 Struct

根據模板製作 struct

• 根據 Figma 畫面中的內容，製作 struct
  

struct FishRect{    // 放置魚資訊的方塊
    var fishName:String    // 赤魟
    var fishNickName:[String]    // ["赤土魟", "紅魴魚", "牛尾魴"]
    var imageName:String {return fishName}    // 赤魟
}

• 產生資料

var toxicFishesData = [
    FishRect(fishName: "赤魟", fishNickName: ["赤土魟", "紅魴魚", "牛尾魴"]),
    FishRect(fishName: "黃魟", fishNickName: ["笨氏土魟", "黃魴", "紅魴"])
]

麻煩的圖片處理

• 目前搜集來的圖片大小不一，要將它們放到畫面中，有很多調整工作。
• 或許有更好的處理方法，只是我暫時還沒學到。
• 我的作法如下

透過 Figma 調整格式後、匯出圖片

• 參考資料放在最後面
• 做法示意圖：將圖片複製到剪貼簿中
  
• 做法示意圖：將剪貼簿圖片存成檔案
  

將圖片加到 Assets 中

• 從左邊的 File navigator 找到 Assets、選擇「+」新增「Image Set」
  

  然後這邊我用起來有缺點，在幫 Image Set 取名字的時候，字都沒打完就莫名其妙確認了...注音輸入法也沒辦法用；浪費許多時間，建議中文資產名稱用複製貼上的。

  

  這邊有 1x, 2x, 3x 的差異，是因為不同手機型號，他的顯示器會選擇不同種大小的圖片...

製作毒魚的資料

• 我快要被關門了 ... 今天先發文，Bug 繼續修

後來修改了三個地方
(1) 在可迭代的結構，需給定 id； 其他替代方案可參考 SwiftUI Initialzier 要求String 符合Identifiable
(2) 針對 FishRect 加上了 Hashable
(3) 先前針對這個 swift 名稱 refactor 後，下方 xxx_Previews 的名字，這邊需要手動把 ContentView_Previews 變成 ToxicFishListView_Previews

• 今天暫時先告一段落
  

參考資料

• Swift Struct - Gitbook by hugolu
• Swift Class vs Struct - APPCODA by Hsu Li-Heng
• 教你買澎湖小卷不受騙，小卷新鮮度差異一次看透｜完整版小卷攻略 - 出港
• Figma 匯出資料的方式
• 從剪貼簿存成圖片方式