如何让一个简单的 SwiftUI 像 UITableView 一样加载（逻辑上！）

Question

我如何让 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]

Answer 1

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

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

Logic -

Calculate columns by assuming equal width for each images in screen

Screen width/width of each image cell

Calculate rows by dividing total image array count with number of columns.

For example;

Total images in array - 5

Total columns say 2

Total rows = 5/2 = 2.5 that means we need 3rd row to display last image

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
    }
}

Tested in Xcode Version 11.3 , iPhone 11 Pro Max & iPad Pro (12.9 - inch) simulators

Result in iPhone

Result in iPad

如何让一个简单的 SwiftUI 像 UITableView 一样加载（逻辑上！）

How to get a simple SwiftUI to load as a UITableView would (logically!)

swiftui

vstack