SwiftUI iOS13情况下实现类似于CollectionView的效果

Posted 2021-06-23 ZH_CQ_iOS

ios 14 Swift2.0是有个LazyVGrid和LazyHGrid这里就不提了

iOS13的情况下是不能使用这两个的

所以只能自己去实现

代码如下:

首先先对集合类型进行一个扩展 进行查找

extension Collection {

    func group(by size: Int) -> [[Element]]? {

            // Inspired by: https://lodash.com/docs/4.17.4#chunk

            guard size > 0, !isEmpty else { return nil }

            var start = startIndex

            var slices = [[Element]]()

            while start != endIndex {

                let end = index(start, offsetBy: size, limitedBy: endIndex) ?? endIndex

                slices.append(Array(self[start..<end]))

                start = end

            }

            return slices

        }

}

 

struct MyGrid<Content: View, T: Hashable>: View {

    

    private let columns: Int   //行数

    private var list: [[T]] = []  //你的数据源

    private let content: (_ index: Int,_ element: T) -> Content

    

    init(columns: Int, list: [T], @ViewBuilder content:@escaping (_ index: Int,_ element: T) -> Content) {

        self.columns = columns

        self.content = content

        self.list = list.group(by: columns) ?? []

    }

 

    var body: some View {

        VStack(alignment: .leading, spacing: 0.0) {

            ForEach(0 ..< self.list.count, id: \\.self) { i  in

                HStack {

                    ForEach(self.list[i].indices, id: \\.self) { index in

                        self.content(i * columns + index , self.list[i][index])

                            .frame(width:(UIScreen.main.bounds.size.width ) / columns)

                    }

                }

            }

        }

    }

}

调用如下：

//columns 每行有几个 list数据源

MyGrid(columns: 2, list: appDataCache.goodsList) { index,goods  in

//下面的这部分你可以理解成自定义的collectionViewCell

                                        memberSelectBtn()

                                            .padding(.top,20)

                                            .padding(.leading,24)

                                            .padding(.trailing,24)

                                            .onTapGesture {

                                            }

                                    }.padding(.top,12)