我已经通过以下代码实现了相同的要求。请检查。
我们需要根据项目总数计算行数和列数
逻辑-
- 通过假设屏幕中每个图像的宽度相等来计算列
- 通过将总图像数组计数除以
列。
- 例如;
struct GalleryView: View {
//Sample array of images
let images: [String] = ["preview1","preview2","preview3","preview4","preview5""]
let columns = Int(UIScreen.main.bounds.width/120.0) //image width is 100 and taken extra 20 for padding
var body: some View {
ScrollView {
GalleryCellView(rows: getRows(),columns: columns) { index in
if index < self.images.count {
Button(action: { }) {
ImageGridView(image: self.images[index])
}
}
}.listRowInsets(EdgeInsets())
}
}
func getRows() -> Int {
//calculate rows based on image count and total columns
let rows = Double(images.count)/Double(columns)
return floor(rows) == rows ? Int(rows) : Int(rows+1.0)
//if number of rows is a double values that means one more row is needed
}
}
//Load image button cell
struct ImageGridView: View {
let image: String
var body: some View {
Image(image)
.renderingMode(.original)
.frame(width:100,height:100)
.cornerRadius(10)
}
}
//Build cell view
struct GalleryCellView<Content: View>: View {
let rows: Int
let columns: Int
let content: (Int) -> Content
var body: some View {
VStack(alignment: .leading,spacing : 0) {
ForEach(0 ..< rows,id: \.self) { row in
HStack(spacing : 10) {
ForEach(0 ..< self.columns,id: \.self) { column in
self.content((row * self.columns) + column)
}
}.padding([.top,.bottom],5)
.padding([.leading,.trailing],10)
}
}.padding(10)
}
init(rows: Int,columns: Int,@ViewBuilder content: @escaping (Int) -> Content) {
self.rows = rows
self.columns = columns
self.content = content
}
}
在Xcode版本11.3,iPhone 11 Pro Max和iPad Pro(12.9-
英寸)模拟器
Result in iPhone
Result in iPad
本文链接:https://www.f2er.com/1755735.html