SwiftUI - Grid View 的實作方法，逐步剖析助你實作-有解無憂

簡介

在當前正式 SwiftUI 版本而言，很多控制元件都是缺少的，比如在 UIKit 框架里有 UICollectionView 組件，可以很方便地做 Gird 格子型別的視圖，但是在 SwiftUI 這個框架里面，就沒有對應 UICollectionView 的組件，我們當然可以用 UIViewRepresentable 來封裝一個 UICollectionView ，但是本篇文章要探討的是，如何使用 SwiftUI 來實作 Grid 格子視圖，現在一起來實作吧，

實作思考

在思考前，我們先來定義生成隨機顏色的函式，后面會用到的，

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 視圖，

var data: [Color] {
    [
        Color.random(),
        Color.random(),
        Color.random(),
        Color.random(),
        Color.random(),
        Color.random()
    ]
}

var body: some View {
    VStack {
        ForEach(0..<data.count) { index in
            self.data[index]
        }
    }
}

有些童鞋會疑問，為什么顏色也能算是視圖呢？這是因為在 SwiftUI 中，View 是一個協議，而 Color 也遵循了 View 協議，所以 Color 也是一個視圖，可以直接在界面上展示它，

說回來現在的例子，效果長這樣，

只需將上面代碼里的 VStack 換成 HStack，就會變成這樣，代碼就不貼了，直接上效果圖，

那么是不是可以通過組合 HStack 與 VStack 能夠實作我們想要的 Grid 視圖呢？答案是可以肯定的，

你們肯定發現了，視圖的上方和下方出現了空白，這是因為 iPhoneX 及之后的版本存在安全邊距，只需通過設定edgesIgnoringSafeArea方法，引數為vertical，代表的是忽略垂直方向的安全邊距，

.edgesIgnoringSafeArea(.vertical)

Grid 實作

為了簡單起見，我們先來打造一行三列的 Grid 視圖，定義一個 View 取名為 GCRowView，視圖的大小按照螢屏的寬度三分之一進行計算，這里的視圖寬和高是一致的，代碼如下所示，關鍵的代碼我會標注數字，在后面進行講解，

struct GCRowView: View {
    var itemPerRow = 3 // 1
    
    var views: [AnyView] = [ // 2
        AnyView(Image("1").resizable().aspectRatio(contentMode: .fill)),
        AnyView(Image("2").resizable().aspectRatio(contentMode: .fill)),
        AnyView(Image("3").resizable().aspectRatio(contentMode: .fill)),
    ]
    
    var itemWidth: CGFloat { // 3
        UIScreen.main.bounds.width / CGFloat(itemPerRow)
    }
    
    var body: some View {
        HStack(spacing: 0) { // 4
            ForEach(0..<views.count) { index in
                self.views[index]
                    .frame(width: self.itemWidth, height: self.itemWidth)
                    .clipped() // 5
            }
        }
    }
}

1 - 每一行有多少個視圖，

2 - 展示的視圖陣列，存盤的型別為 AnyView，后面可以直接取用視圖，.resizable() 方法是為了讓圖片可以調整大小，.aspectRatio 設定為 .fill 是為了讓圖片保持原有的比例，并填滿整個 frame，

3 - 計算每個視圖的寬高，

4 - HStack 默認是有 spacing 的，這里的布局是一個視圖貼著一個的，因此設為0，

5 - 影像超出部分進行裁剪，

現在的效果是這樣的，

可以看到視圖正確地顯示出來了，

現在創建 GCGirdContentView ，在其內實作一些演算法，分別是計算總共有多少行和每一行展示的具體視圖，先來實作 rowCount(contentNums:itemPerRow:) 方法計算總行數，引數分別是視圖總數和每行的視圖數量，

func rowCount(contentNums: Int, itemPerRow: Int) -> Int {
    if contentNums % itemPerRow == 0 {
        return contentNums / itemPerRow
    }

    return contentNums / itemPerRow + 1
}

1 - 進行取余運算，余數為 0 則代表可以被整除

2 - 既然可以被整除，則可以直接計算商就可以了

3 - 若余數不為 0 ，則代表需要換行，因此除了計算商后還需要進行 +1

計算出每行排列的視圖，回傳視圖陣列，用于給 GCRowView 進行顯示，方法的引數分別是當前行數和每行的視圖數量，

func rowViews(currentRow: Int, itemPerRow: Int) -> [AnyView] {
    var views = [AnyView]()

    for i in 0..<itemPerRow { // 1
        let index = i + itemPerRow * currentRow // 2
        if index < contentViews.count { // 3
            views.append(contentViews[index]) // 4
        }
    }

    return views
}

1 - 回圈遍歷每行的視圖數量

2 - 計算當前應該取出哪個視圖

3 - 計算程式安全邊界，若超出視圖總數則忽略不計

4 - 取出視圖并放入視圖陣列

接著把 GCRowView 封裝得通用一點，把 itemPerRow 和 views 的默認值去除，

struct GCRowView: View {
    var itemPerRow: Int
    
    var views: [AnyView]
    
    //...

直到目前，我們已經完成了大部分的作業，現在來組裝一下 GCGirdContentView 視圖，

struct GCGirdContentView: View {
    var itemPerRow = 3
    
    var contentViews: [AnyView] = []
    
    init() { // 1
        for i in 1...12 {
            contentViews.append(AnyView(Image("\(i)").resizable().aspectRatio(contentMode: .fill)))
        }
    }
    
    var body: some View {
        VStack(alignment: .leading, spacing: 0) { // 2
            ForEach(0..<rowCount(contentNums: contentViews.count, itemPerRow: itemPerRow)) { i in // 3
                GCRowView(itemPerRow: self.itemPerRow, views: self.rowViews(currentRow: i, itemPerRow: self.itemPerRow)) // 4
            }
        }
    }
}

1 - 在 init 函式里初始化 contentViews ，加入需要展示的影像視圖

2 - VStack 設定為左邊對齊，行間距設為 0 ，讓視圖緊貼著彼此

3 - 遍歷回圈行數，用到了剛剛定義的 rowCount(contentNums:itemPerRow:) 方法

4 - 顯示的 GCRowView 行視圖，配合當前行 i 并利用 rowViews(currentRow:itemPerRow:) 方法計算出需要顯示的具體視圖組

現在運行，最終效果圖如下所示，