0

如何让 SwiftUI 水平加载 8 张图像，但是如果第三张图像碰巧离开屏幕，它会将其放在具有相同填充的第一张图像下方的 Vstack 中......第4个。

我无论如何都找不到这样做！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]
4

1 回答 1

1

我通过下面的代码实现了同样的要求。请检查。

我们需要根据项目总数计算行数和列数

逻辑 -

  1. 通过假设屏幕中每个图像的宽度相等来计算列
    • 每个图像单元的屏幕宽度/宽度
  2. 通过将总图像数组计数除以列数来计算行数。
  3. 例如;

  • 数组中的总图像 - 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 英寸）模拟器中测试

结果在 iPhone

结果在 iPad

于 2020-08-13T14:22:26.063 回答