SwiftUI - Grid View 的實現方法，逐步剖析助你實現
阿新 • • 發佈：2020-08-30
## 簡介
在當前正式 SwiftUI 版本而言，很多控制元件都是缺少的。比如在 UIKit 框架裡有 UICollectionView 元件，可以很方便地做 Gird 格子型別的檢視。但是在 SwiftUI 這個框架裡面，就沒有對應 UICollectionView 的元件。我們當然可以用 UIViewRepresentable 來封裝一個 UICollectionView ，但是本篇文章要探討的是，如何使用 SwiftUI 來實現 Grid 格子檢視，現在一起來實現吧。
## 實現思考
在思考前，我們先來定義生成隨機顏色的函式，後面會用到的。
```swift
extension Double {
static func randomData() -> Double {
Double(arc4random()) / Double(UInt32.max)
}
}
extension Color {
static func random() -> Color {
.init(red: Double.randomData(), green: Double.randomData(), blue: Double.randomData())
}
}
```
想必 HStack 橫向佈局與 VStack 豎向佈局你們已經掌握得很熟練了，比如豎向排列 6 個 Color 檢視。
```swift
var data: [Color] {
[
Color.random(),
Color.random(),
Color.random(),
Color.random(),
Color.random(),
Color.random()
]
}
var body: some View {
VStack {
For