|
簡(jiǎn)介在當(dāng)前正式 SwiftUI 版本而言，很多控件都是缺少的。比如在 UIKit 框架里有 UICollectionView 組件，可以很方便地做 Gird 格子類型的視圖。但是在 SwiftUI 這個(gè)框架里面，就沒(méi)有對(duì)應(yīng) UICollectionView 的組件。我們當(dāng)然可以用 UIViewRepresentable 來(lái)封裝一個(gè) UICollectionView ，但是本篇文章要探討的是，如何使用 SwiftUI 來(lái)實(shí)現(xiàn) Grid 格子視圖，現(xiàn)在一起來(lái)實(shí)現(xiàn)吧。 實(shí)現(xiàn)思考在思考前，我們先來(lái)定義生成隨機(jī)顏色的函數(shù)，后面會(huì)用到的。 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 豎向布局你們已經(jīng)掌握得很熟練了，比如豎向排列 6 個(gè) 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]
}
}
}有些童鞋會(huì)疑問(wèn)，為什么顏色也能算是視圖呢？這是因?yàn)樵?SwiftUI 中，View 是一個(gè)協(xié)議，而 Color 也遵循了 View 協(xié)議，所以 Color 也是一個(gè)視圖，可以直接在界面上展示它。 說(shuō)回來(lái)現(xiàn)在的例子，效果長(zhǎng)這樣。
只需將上面代碼里的 VStack 換成 HStack，就會(huì)變成這樣，代碼就不貼了，直接上效果圖。
那么是不是可以通過(guò)組合 HStack 與 VStack 能夠?qū)崿F(xiàn)我們想要的 Grid 視圖呢？答案是可以肯定的。 你們肯定發(fā)現(xiàn)了，視圖的上方和下方出現(xiàn)了空白，這是因?yàn)?iPhoneX 及之后的版本存在安全邊距，只需通過(guò)設(shè)置 .edgesIgnoringSafeArea(.vertical) Grid 實(shí)現(xiàn)為了簡(jiǎn)單起見(jiàn)，我們先來(lái)打造一行三列的 Grid 視圖。定義一個(gè) View 取名為 GCRowView，視圖的大小按照屏幕的寬度三分之一進(jìn)行計(jì)算，這里的視圖寬和高是一致的，代碼如下所示，關(guān)鍵的代碼我會(huì)標(biāo)注數(shù)字，在后面進(jìn)行講解。 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
}
}
}
}
現(xiàn)在的效果是這樣的。
可以看到視圖正確地顯示出來(lái)了。 現(xiàn)在創(chuàng)建 GCGirdContentView ，在其內(nèi)實(shí)現(xiàn)一些算法，分別是計(jì)算總共有多少行和每一行展示的具體視圖。先來(lái)實(shí)現(xiàn) rowCount(contentNums:itemPerRow:) 方法計(jì)算總行數(shù)，參數(shù)分別是 func rowCount(contentNums: Int, itemPerRow: Int) -> Int {
if contentNums % itemPerRow == 0 {
return contentNums / itemPerRow
}
return contentNums / itemPerRow + 1
}
計(jì)算出每行排列的視圖，返回視圖數(shù)組，用于給 GCRowView 進(jìn)行顯示，方法的參數(shù)分別是 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
}
接著把 GCRowView 封裝得通用一點(diǎn)，把 itemPerRow 和 views 的默認(rèn)值去除。 struct GCRowView: View {
var itemPerRow: Int
var views: [AnyView]
//...直到目前，我們已經(jīng)完成了大部分的工作，現(xiàn)在來(lái)組裝一下 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
}
}
}
}
現(xiàn)在運(yùn)行，最終效果圖如下所示。
總結(jié)在 SwiftUI 里實(shí)現(xiàn) Grid 其實(shí)不算是復(fù)雜，通過(guò)組合 HStack 與 VStack 就能夠助我們實(shí)現(xiàn) Grid 視圖。 在最新的 SwiftUI Beta 版里，蘋果推出了如 LazyVGrid、LazyHGrid、GridItem 來(lái)實(shí)現(xiàn)管理 Grid 視圖，我們就拭目以待吧，后續(xù)有機(jī)會(huì)再來(lái)更新一波。 源碼下載我已經(jīng)把源碼 GCGridView 上傳到 GitHub 上，往期所有的 Demo 源碼皆放在了SwiftUI-Tutorials，歡迎自取。如果該項(xiàng)目幫到你的話，請(qǐng)給我個(gè) Star 告知，謝謝！喜歡本篇文章的小伙伴，歡迎給個(gè)關(guān)注，后續(xù)繼續(xù)更新更多文章，謝謝！ 關(guān)于作者博文作者：GarveyCalvin 微博：https://weibo.com/feiyueharia 博客園：https://www.cnblogs.com/GarveyCalvin 本文版權(quán)歸作者，歡迎轉(zhuǎn)載，但必須保留此段聲明，并給出原文鏈接，謝謝合作！ |
|
|
