如何获得一个简单的SwiftUI作为UITableView加载(逻辑上!)

我怎样才能让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]
iCMS 回答:如何获得一个简单的SwiftUI作为UITableView加载(逻辑上!)

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

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

逻辑-

  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- 英寸)模拟器

Result in iPhone

Result in iPad

本文链接:https://www.f2er.com/1755735.html

大家都在问