tags: 釣魚術 swift

開發進度說明

• 從前一篇做出的外觀接續修改後，如下圖所示
  
• 左上角的兩個數字，用來計算抓到的魚以及交手的魚，未來會存到本地的資料庫、同步到雲上。
• 右上角的用來幫郵票做編號
• 中間放魚的名字
• 下面擺三個按鈕

//
//  StampAlbumView.swift
//  BaoAnGongFisher
//
//  Created by nipapa on 2022/10/9.
//

import SwiftUI

struct StampAlbumView: View {
    private var stampData: [Int] = Array(1...30)
    private let colors: [Color] = [
        .red, .blue, .green, .yellow, .pink, .cyan, .indigo]
    
    private let adaptiveColumns = [
        GridItem(.adaptive(minimum: 130))
    ]
    
    var body: some View {
        NavigationView{
            ScrollView{
                LazyVGrid(columns: adaptiveColumns, spacing: 10) {
                    ForEach(stampData, id: \.self) { number in
                        ZStack{
                            Rectangle()  // 底部是個方塊
                                .frame(width: 180, height: 250)
                                .foregroundColor(colors[number%7])
                                .cornerRadius(10)
                            VStack{  // 中間放一層 垂直堆
                                HStack{
                                    Text("1/1")
                                        .padding()
                                        .font(.footnote)
                                    Spacer()
                                    Text("\(number)")
                                        .frame(width: 15, height: 15, alignment: .center)
                                        .font(.footnote)
                                        //.fontWeight(.bold)
                                        .padding()
                                        //.background(Color(.gray))
                                        .overlay(
                                            Circle()
                                                .size(width: 16, height: 16)
                                                .offset(x: 16,y: 16)
                                                .scale(1.5)
                                                .stroke(Color.orange, lineWidth: 3)
                                        )
                                }
                                .padding(10)
                                Text("**石狗公**")
                                Image("石狗公")
                                    .resizable()
                                    .frame(width: 80, height: 80)
                                // Button
                                HStack{
                                    Button(action: addStampByName) {
                                        Label("", systemImage: "plus.rectangle.fill.on.rectangle.fill")
                                        .labelStyle(.iconOnly)
                                        .frame(width: 40, height:40)
                                        .foregroundColor(.white)
                                        .background(Color.black)
                                        .cornerRadius(15)
                                        .padding(5)
                                    }
                                    Button(action: editStampByName) {
                                        Label("", systemImage: "pencil")
                                        .labelStyle(.iconOnly)
                                        .frame(width: 40, height:40)
                                        .foregroundColor(.white)
                                        .background(Color.black)
                                        .cornerRadius(15)
                                        .padding(5)
                                    }
                                    Button(action: deleteStampByName) {
                                        Label("", systemImage: "xmark.bin")
                                        .labelStyle(.iconOnly)
                                        .frame(width: 40, height:40)
                                        .foregroundColor(.white)
                                        .background(Color.black)
                                        .cornerRadius(15)
                                        .padding(5)
                                    }
                                }
                                Spacer()
                            }
                        }
                    }
                }
            }
            .navigationTitle("集郵冊")
        }
    }
    
    func addStampByName() {
        // pass
    }
    
    func editStampByName() {
        // pass
    }
    
    func deleteStampByName() {
        // pass
    }
}

struct StampAlbumView_Previews: PreviewProvider {
    static var previews: some View {
        StampAlbumView()
    }
}

心得

• 接著是資料的提取與儲存

Ref

• https://stackoverflow.com/questions/59150320/how-to-bold-text-in-swiftui-textfield