tags: 釣魚術 SwiftUI

前情提要

• 這次在學習 SwiftUI 的過程中，好像比預計的緩慢一些；接下來還有 26 篇文章，先前還沒提到 App 的最終目標。
• 今天是中秋假期的第一天，下方先列出想做的內容之後，再來分配進度。

目標

願望功能

1. 為了學習認識魚，需要一個圖鑑 -> 製作中
2. 釣魚人的集郵冊
3. 釣點記錄 / 分享功能
4. 潮汐天氣提醒功能 ... (其他 App 有做過，因此順位放最後)

參考開源資料

• 以往的學習路程的起點都是先看書，不過我覺得先看看別人做了什麼事情，從開源專案可以直接翻閱程式碼和測試。
• GitHub 上，熱門的 SwiftUI 開源專案
• 從官方提供的文件或手冊作為開發參考資料。(developer.apple.com)

繼續開發

• 昨天使用 List{} 將變數中的魚名做成列表後，今天接著把畫完刻完。
  

• 來看看原始碼的部分...

ToxicFishListView.swift source code

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

import SwiftUI


struct ToxicFishListView: View {
    var toxicfishes = toxicFishesData
    var body: some View {
        VStack(spacing: 10){
            HStack{
                Text("危險魚類")
                    .background(.red)
                    .font(.title)
                    .frame(alignment: .topLeading)
                Spacer()
            }
            
            List(toxicfishes, id: \.self) { toxicfish in
                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.swift 說明

• 透過巢狀式擺放元件

• HStack

  • https://developer.apple.com/documentation/SwiftUI/HStack
  • A view that arranges its subviews in a horizontal line.
  • 包在裡面的 subview 會以水平方式排列

• VStack

  • https://developer.apple.com/documentation/SwiftUI/VStack
  • A view that arranges its subviews in a vertical line.
  • 包在裡面的 subview 會以垂直方式排列

• Spacer

  • https://developer.apple.com/documentation/SwiftUI/Spacer
  • A flexible space that expands along the major axis of its containing stack layout, or on both axes if not contained in a stack.
  • 彈性大小的空白填充物...

• Image

  • https://developer.apple.com/documentation/SwiftUI/Image
  • 用來插入圖片，當圖片被加入到 Assets 後，就可以直接在 Image 中，加入 Asset 名稱來顯示圖片。
    

• 其他沒用到的東西先不玩不介紹了...

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: ["笨氏土魟", "黃魴", "紅魴"])
]

• 當程式碼裡面散落了許多零星內容，像是 View 中，放了 class 或是 struct，除了版面混雜之外，後續在維護的時候，那時候應該已經忘記程式碼片段擺在哪裡了。屆時會花很多時間在一堆打結的毛線團裡找線頭。
• 在 BaoAnGongFisher 目錄下，新建一個 swift 檔，命名成 ToxicFish.swift
• 判斷要用 class 或 struct ... 參考 choosing-between-structures-and-classes

結論

• 有了簡單的排版方式，文字和圖片，可以製作出大部分的靜態內容了。
• 學習還是要按部就班 :D