SwiftUI：看我展示52張撲克牌，“很快啊!”
阿新 • • 發佈：2020-11-26
[toc]
## 思路
使用 SwiftUI 建立 UI 結構；
使用 swift 的列舉和結構體實現資料生成，通過 viewModel 整合資料用於展示（互動暫時未做，因此不涉及 MVVM 設計模式中的資料繫結）。
## 效果圖
畫布實時預覽 iphone 效果圖：
執行 iphone11 黑暗模式效果圖：
執行 ipad air 模擬器效果圖：
## 相關程式碼解析
### 列舉建立撲克牌號碼
```swift
//CaseIterable:當需要對列舉進行遍歷時，需要遵守 CaseIterable 協議，然後對列舉的 allCases 類屬性進行遍歷即可
enum Rank:Int, CaseIterable {
case ace = 1
//未指定確定值的類別，預設值是“依次”加1，因此，two 的 rawValue 為2，three 的 rawValue 為 3，以此類推
case two,three,four,five,six,seven,eight,nine,ten
case J,Q,K
//swift的列舉，可以自定義方法。寫程式碼時，“很快啊!”
func customDescription()->String{
switch self {
case .ace:
return "A"
case .J:
return "J"
case .Q:
return "Q"
case .K:
return "K"
default:
return "\(self.rawValue)"
}
}
}
```
### 列舉建立撲克牌型別
```swift
enum CardType: CaseIterable{
case heart,spades,club,diamond
func customDescription() -> String {
switch self {
case .heart:
//command+ctrl+space,快速調出 emoji 視窗，可以搜尋，"很6啊!"
return "♥️"
case .spades:
return "♠️"
case .club:
return "♦️"
default:
return "♣️"
}
}
}
```
### viewModel邏輯
```swift
struct GameVM {
/// 宣告為 private，符合封裝的思想，通過方法初始化時，必須是類方法（static func）！如果用例項方法，建立例項時，屬性還未初始化，不符合語法！
private var model:GameM = generateGame()
//陣列的泛型不能直接宣告為 Card 型別，會提示找不到。需要通過結構體名點出來！
var cards: Array {
return model.cards
}
static func generateGame()->GameM{
var lArr: Array = Array()
//兩個迴圈就建立好了資料來源，"很快啊!"
for type in CardType.allCases {
for rank in Rank.allCases{
lArr.append(GameM.Card(rank: rank, type:type))
}
}
return GameM(cards: lArr)
}
}
```
### UI實現
```swift
/// 宣告式UI程式設計，"很快啊!"
struct ContentView: View {
var viewModel: GameVM
var body: some View {
let columnNum = 4
let rowNum = viewModel.cards.count/columnNum
return
HStack{
ForEach(0..