技術筆記-iOS實戰003-取用SwiftUI之必要元件，搭配資料處理技術，組成一個有意義的應用

需求情境：

一般的看盤軟體，雖然都能針對一籃子自選股票，列出其即時行情和當天漲幅，但若要看「五日漲幅」呢？那就少見了，但這對我很重要。因為小部位的波段性價差交易是個好策略，這時候若能排序好一整排看下來，可以節省大量點來點去的成本，很有價值，所以就來自己刻。

解決方案：

從大處著眼，UI 最外層需要一個可上下捲動的容器，就是 ScrollView；容器裡面放一個類似表格的結構。雖然 SwiftUI 有一個 Table 元件，但它預設是給 iPad 使用的，在iPhone 上顯示會很奇怪，只會顯示一行，也不會有標題，然後沒有任何提示說資料顯示不完全，簡直是莊孝維，完全不可用，故放棄之，改用 Grid 取代之。資料排列整齊之後，希望能夠按標題排序，切換正序或倒序。另外也須希望能夠切換觀察漲幅的基準是一日或五日，所以又會用到 Picker 這種元件，然後取用上一篇 iOS實戰002 裡面資料處裡的技術成果，搭配起來，讓功能水準得到一次顯著提升。

實作步驟：

最完整的文件就在原始碼裡面。以下程式重點為，以 ScrollView and Grid 為最外層容器，裡面一行一行以 GridRow 依序展開。第一行為標題，三個欄位固定只有文字，第四個欄位就比較特別了，是由一個 Button 組成，點下去會排序，排序完後順便把控制排序順序的變數 sortDirection 變號，使下一次再按時變成順序顛倒。

接下來跑一個迴圈，每一筆資料產生一個 GridRow，裡面包含四個欄位的資料格內容，為了讓每一格顯示上下兩項資料，所以又用 VStack 包起來。第一格的 Symbol 部分，用之前系統設計既有風格的自訂顏色，最後一個則動態指定顏色，漲時紅色，跌時綠色，事就這樣成了。

ScrollView {
	Grid {
		GridRow() {
			Text("Symbol")
			Text("Base Day")
			Text("Price")
			HStack {
				Button(action: {
					self.newDashItems.sort(by: {
						a, b in
							a.chgRate*sortDirection < b.chgRate*sortDirection
						})
						sortDirection *= (-1.0)
					},
					label: {
						Text("Change")
						Image(systemName: "chevron.up.chevron.down")
					})
				}
			}
			.font(.headline)
			.fontWeight(.bold)
			.background()
			
			Divider()
			
			ForEach(newDashItems) { item in
				GridRow {
				//DashItemView(item: item)
				VStack {
					let symbolStr = item.symbol.replacingOccurrences(of: ".TWO", with: "").replacingOccurrences(of: ".TW", with: "")
					Text(symbolStr)
						.padding(3)
						.foregroundColor(Color(red: 181/255.0, green: 81/255.0, blue: 81/255.0))
						.background(Color(red: 242/255.0, green: 244/255.0, blue: 244/255.0), in: RoundedRectangle(cornerRadius: 8))
						.fontWeight(Font.Weight.bold)
						.padding(3)
					Text("\(item.name)")
						.fontWeight(.bold)
				}
				VStack {
					Text(item.baseDay.suffix(4))
					let baseCloseString = String(format: "%.2f", item.baseClose)
					Text(baseCloseString)
				}
				VStack {
					let lastTimeValue = item.dataList[item.dataList.count-1]
					Text(lastTimeValue.time.suffix(9))
					let newValueString = String(format: "%.2f", item.dataList[item.dataList.count-1].value)
					HStack {
						Text("\(newValueString)")
					}
				}
				VStack {
					let iconColor = item.chgRate > 0 ? Color.red : Color.green
					let chgRateStr = String(format: "%.1f", item.chgRate*100)
						Text("\(chgRateStr) %")
							.foregroundColor(iconColor)
				}
			}
			Divider()
		}
	}
}
.onAppear {
	getDashItemsFromFile()
}

以下兩畫面分別顯示一日漲幅與五日漲幅，格式均相同，只是 Base Day 的內容被抽換了，後面繼續說明資料處理部分的程式。

按下 Picker day1 or day5 的動作如下：

先宣告狀態變數 baseDayOption，屬於自訂列舉型別 BaseDayOption，具有預設值 day1，按下按鈕時，將原始從後台接收的 dashItems 用 map 函數映射成另一個陣列 newDashItems，根據選項重先設定 baseDay, baseClose, chgRate，UI 元件則設定好會顯示新的陣列。

@State private var baseDayOption: BaseDayOption = .day1
enum BaseDayOption {
	case day1
	case day5
}

func computeNewItems() {
	switch baseDayOption {
		case .day1:
			newDashItems = dashItems.map { item in
				var newItem = item
					newItem.baseDay = item.lastCloseDay
					newItem.baseClose = item.lastClose
					newItem.chgRate = (item.dataList[item.dataList.count-1].value - item.lastClose) / item.lastClose
						return newItem
			}
		case .day5:
			newDashItems = dashItems.map { item in
				var newItem = item
					newItem.baseDay = item.last5Day
					newItem.baseClose = item.last5Close
					newItem.chgRate = (item.dataList[item.dataList.count-1].value - item.last5Close) / item.last5Close
						return newItem
			}
	}
}

因為 baseDay，baseClose，chgRate 三個欄位是計算欄位，後台傳回時並沒有，因此在 decode 時會出錯，因此必須重新定義初始化函示 init()，在其中指定預設值，讓 decoder 可順利運作：

struct DashItem: Codable, Identifiable {
    let alertId: Int
    let symbol: String 
    let name: String
    let lastCloseDay: String
    let last5Day: String
    let lastClose: Double
    let last5Close: Double
    let dataList: [TimeValue]
    var id: Int {
        alertId
    }
    
    var baseDay: String
    var baseClose: Double
    var chgRate: Double
    
    init(from decoder: Decoder) throws {
        let container = try decoder.container(keyedBy: CodingKeys.self)
        alertId = try container.decode(Int.self, forKey: .alertId)
        symbol = try container.decode(String.self, forKey: .symbol)
        name = try container.decode(String.self, forKey: .name)
        lastCloseDay = try container.decode(String.self, forKey: .lastCloseDay)
        last5Day = try container.decode(String.self, forKey: .last5Day)
        lastClose = try container.decode(Double.self, forKey: .lastClose)
        last5Close = try container.decode(Double.self, forKey: .last5Close)
        dataList = try container.decode([TimeValue].self, forKey: .dataList)
        baseDay = ""
        baseClose = 0
        chgRate = 0
    }
}

struct TimeValue: Codable {
    let time: String
    let value: Double
}

至於系統增加顯示檔案更新的時間，使用以下程式：

func getFileDatetime(fileName: String) -> Date? {
	let filePath = getDocumentDirectory().appendingPathComponent(fileName)
	do {
		let attributes = try FileManager.default.attributesOfItem(atPath: filePath.path)
		if let modificationDate = attributes[FileAttributeKey.modificationDate] as? Date {
			return modificationDate
		} else {
			return nil
		}
	} catch {
		return nil
	}
}

技術掌握狀況盤點：

資料部分：

1. 呼叫 REST api，接收 json 資料並解碼，特定欄位不解碼，塞預設值。
2. 非同步呼叫，程序獨立成 service 模組，並非同步接收回傳值與 UI 渲染。
3. 陣列的 map 操作，sort 操作。
4. 本地端 DocumentDirectory 裡的檔案儲存，讀取。

UI 部分：

1. Layout：ScrollView，GridView，VStack，HStack
2. 元件：Text，Image，Button，Picker

Newman 2024/6/20

導覽頁：紐曼的技術筆記-索引