问题描述
我怎样才能让SwiftUI水平加载8张图像,但是如果第三张图像碰巧不在屏幕上,它会将它放在第一个图像下方的vstack中,且具有相同的填充...如果三个可以容纳在屏幕上,它会到第四位一样。
我还是找不到这样做! TableViews易于实现,但是现在SwiftUI使事情变得更加困难
iPhone:
[1] [2]
[3] [4]
[5] [6]
[7] [8]
iPad Pro
[1] [2][3] [4]
[5] [6] [7] [8]
iPad Mini
[1] [2][3]
[4] [5] [6]
[7] [8]
解决方法
我已经通过以下代码实现了相同的要求。请检查。
我们需要根据项目总数计算行数和列数
逻辑-
- 通过假设屏幕中每个图像的宽度相等来计算列
- 屏幕宽度/每个图像单元的宽度
- 通过将总图像数组计数除以 列。
- 例如;
数组中的图像总数-5
总列数为2
总行数= 5/2 = 2.5,这意味着我们需要第三行才能显示最后一张图片
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- 英寸)模拟器