tags: 釣魚術 SwiftUI NavigationView

開發筆記

• 經過閱讀由 SimpleBoilerplates GitHub 提供的 Cheatsheet，快速地認識一下各種佈局的用法
• 我想做的外觀應該是更接近 NavigationView

然而參考官方手冊後，發現這個 NavigationView 用法已經準備要被淘汰了...
連結：https://developer.apple.com/documentation/swiftui/navigationview

取而代之的新語法是 NavigationStack，不過我的手機和開發的測試環境，還沒更新到 iOS 16.0 之後的版本，所以先暫時用 NavigationView 的方式吧。

本日修改

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 {
        NavigationView {
            VStack{
                ForEach(fishCates, id: \.self) { fishCate in
                    VStack {
                        NavigationView {
                            List(toxicfishes, id: \.self) { toxicfish in    // 每一種魚
                                // Fish Rectangle
                                if toxicfish.fishCategory == fishCate {
                                    HStack {    // 有毒的魚，會以水平方式堆疊其他元件
                                        // 最左邊放一張圖片
                                        Image(toxicfish.imageName)
                                            .resizable()
                                            .frame(width: 40, height: 40)
                                            .cornerRadius(4)
                                        // 放一個垂直堆疊
                                        VStack {
                                            // 魚的名字
                                            HStack {
                                                Text(toxicfish.fishName)
                                                    .font(.headline)
                                                    .fontWeight(.bold)
                                                    .frame(alignment: .leading)
                                                Spacer()
                                            }
                                            // 魚的俗名，把 [String] join 成一個大的字串
                                            HStack {
                                                Text(toxicfish.fishNickName.joined(separator: "、 "))
                                                    .frame(width: 200, alignment: .leading)
                                                    .background(Color(hue: 0.279, saturation: 1.0, brightness: 1.0, opacity: 0.21))
                                                Spacer()
                                            }
                                        }
                                    }
                                }   // end of 每一種魚
                            }
                            .listRowSeparator(.hidden)
                            .navigationTitle(fishCate)  // 危險魚類圖鑑
                        }
                    }   // end of 每一分類魚
                }
            }
            .navigationBarTitle(Text("危險魚類圖鑑"), displayMode: .inline)
        }
    }
}

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

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: ["石頭魚", "獅甕", "紅鱠仔"]),
    FishRect(fishName: "花身鯻", fishCategory: "斑午", fishNickName: ["花身雞魚", "花身仔", "雞仔魚", "斑午"])
]

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

心得

• 覺得外觀的樣子有稍微變得好看了一些
• UI/UX 的專業人員真的很重要，如果有慣老闆不想花錢做好 UI/UX，大概可以參考五股的修車網站...