- 重複出現的「郵票」,就拉出來變成一個 struct,叫 FishStampView 囉!!
struct FishStampView: View {
var imgName: String
var fishName: String
var catched: Int
var counted: Int
var number: Int
private let colors: [Color] = [
.red, .blue, .green, .yellow, .pink, .cyan, .indigo]
var body: some View {
Rectangle()
.frame(width: 180, height: 250)
.foregroundColor(colors[number%7])
.cornerRadius(10)
VStack{
HStack{
Text("\(catched)/\(counted)")
.padding()
.font(.footnote)
Spacer()
Text("\(number)")
.frame(width: 15, height: 15, alignment: .center)
.font(.footnote)
.padding()
.overlay(
Circle()
.size(width: 16, height: 16)
.offset(x: 16,y: 16)
.scale(1.5)
.stroke(Color.orange, lineWidth: 3)
)
}
.padding(10)
Text("**\(fishName)**")
Image("\(fishName)")
.resizable()
.frame(width: 80, height: 80)
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()
}
}
func addStampByName() {
print("ADD !!!")
}
func editStampByName() {
}
func deleteStampByName() {
}
}
- 剛剛那些都是 View ;接下來是 Model 的部分。 另外新建一個檔案,叫
FishStamp.swift
吧,裡面先放兩筆資料,測測看東西能不能出來。
import Foundation
struct Stamp: Hashable {
var imgName: String
var fishName: String
var catched: Int
var counted: Int
}
var stampsData = [
Stamp(imgName: "石狗公", fishName: "石狗公", catched: 5, counted: 8),
Stamp(imgName: "花身鯻", fishName: "花身鯻", catched: 20, counted: 32)
]