swift - 如何在collectionView中实现三个项目的网格

Question

我正在尝试在 collectionView 中实现网格布局。这是我目前的看法

我想展示 3 个项目而不是每个系列的 1 个项目
这是我的产品查看

struct ProductSearchView: View {
@Environment(\.presentationMode) var presentationMode

 @ObservedObject var model: SearchResultViewModel
var body: some View{
    NavigationView {
         List {
                ForEach(0 ..< Global.productArry.count) { value in
                  Text(Global.productArry[value].name)
                    CollectionView(model: self.model, data: Global.productArry[value])
                }
                
         }.navigationBarTitle("Store")
    }


}

}
这是我的收藏 View

struct CollectionView: View {
@ObservedObject var model: SearchResultViewModel

let data: Product
    var body: some View {
        VStack {
            HStack {
                Spacer()
                    AsyncImage(url: URL(string: self.data.productImageUrl)!, placeholder: Text("Loading ...")
                    ).aspectRatio(contentMode: .fit)
                Spacer()
               
            }
            VStack {
                Spacer()
                Text(self.data.name)
                Spacer()
                
            }
            HStack {
                Text("Aisle: \(self.data.location_zone)\(String(self.data.aisleNo))").bold()
                Text("$\(String(self.data.productPrice))")
            }
        }.onAppear(perform:thisVal)
     }

func thisVal (){
    
    print(self.data.productImageUrl)
    
}

}
我怎样才能实现三个项目的网格？

Answer 1

如果您使用 Xcode 11 附带的 SwiftUI 版本 1，则下面的代码片段是您所需要的。项目的数量。

import SwiftUI

struct GridView<Content, T>: View where Content: View {
    // MARK: - Properties
    var totalNumberOfColumns: Int
    var numberRows: Int {
        return (items.count - 1) / totalNumberOfColumns
    }
    var items: [T]
    /// A parameter to store the content passed in the ViewBuilder.
    let content: (_ calculatedWidth: CGFloat,_ type: T) -> Content
    
    // MARK: - Init
    init(columns: Int, items: [T], @ViewBuilder content: @escaping(_ calculatedWidth: CGFloat,_ type: T) -> Content) {
        self.totalNumberOfColumns = columns
        self.items = items
        self.content = content
    }
    
    // MARK: - Helpers
    /// A function which help checking if the item exist in the specified index to avoid index out of range error.
    func elementFor(row: Int, column: Int) -> Int? {
        let index:Int = row * self.totalNumberOfColumns + column
        return index < items.count ? index : nil
    }
    
    // MARK: - Body
    var body: some View {
        GeometryReader { geometry in
            ScrollView{
                VStack {
                    ForEach(0...self.numberRows,id: \.self) { (row) in
                        HStack {
                            ForEach(0..<self.totalNumberOfColumns) { (column) in
                                Group {
                                    if (self.elementFor(row: row, column: column) != nil)  {
                                        self.content(geometry.size.width / CGFloat(self.totalNumberOfColumns), self.items[self.elementFor(row: row, column: column)!])
                                            .frame(width: geometry.size.width / CGFloat(self.totalNumberOfColumns), height: geometry.size.width / (CGFloat(self.totalNumberOfColumns)), alignment: .center)
                                    }else {
                                        Spacer()
                                    }
                                }
                            }
                        }
                        
                    }
                }
            }
        }
    }
}

用法 :它是通用的，可以与您选择的任何 View 一起使用。例如，下面的预览代码使用系统图像。

struct GridView_Previews: PreviewProvider {
    static var previews: some View {
        GridView(columns: 3, items: ["doc.text.fill","paperclip.circle.fill", "globe","clear.fill","sun.min.fill", "cloud.rain.fill", "moon","power"], content: { gridWidth,item  in
            Image(systemName: item)
                .frame(width: gridWidth, height: gridWidth, alignment: .center)
                .border(Color.orange)
        })
        .padding(10)
    }
}

输出

您可以更改代码以满足您的需求，例如填充等。
注意:仅当您没有很多 View 时才使用此方法，因为它的性能不是很好。如果您有很多要滚动的 View ，我建议您使用更新且简单的内置工具 GridItem来自 Apple 今年在 WWDC 上推出的。但是您必须使用 Xcode 12，它目前是 Beta 版。