需求情境：
一般的看盤軟體，雖然都能針對一籃子自選股票，列出其即時行情和當天漲幅，但若要看「五日漲幅」呢？那就少見了，但這對我很重要。因為小部位的波段性價差交易是個好策略，這時候若能排序好一整排看下來，可以節省大量點來點去的成本，很有價值，所以就來自己刻。
解決方案：
從大處著眼，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
}
}
技術掌握狀況盤點：
資料部分：
- 呼叫 REST api，接收 json 資料並解碼，特定欄位不解碼，塞預設值。
- 非同步呼叫，程序獨立成 service 模組，並非同步接收回傳值與 UI 渲染。
- 陣列的 map 操作，sort 操作。
- 本地端 DocumentDirectory 裡的檔案儲存，讀取。
UI 部分：
- Layout：ScrollView，GridView，VStack，HStack
- 元件：Text，Image，Button，Picker
Newman 2024/6/20
導覽頁：紐曼的技術筆記-索引
