ios 在垂直和水平方向上延迟加载SwiftUI网格

quhf5bfb  于 2022-11-19  发布在  iOS
关注(0)|答案(1)|浏览(142)

正如标题所述,我尝试构建一个在垂直和水平方向上都能缓慢加载的Grid视图,主要目标是为员工列表构建一个日历,列表和日历的时间间隔都可能非常大,因此必须延迟呈现。我尝试过LazyHGridLazyVGrid,但它们只能延迟呈现一个方向的视图。进一步的方法是对整个视图使用一个LazyVStack,对每行使用一个LazyHStack,加载是缓慢的(检查控制台中的打印),但在滚动视图时,视图会丢失位置,网格会被破坏

struct ContentView: View {
    var body: some View {
        ScrollView([.horizontal, .vertical]) {
            LazyVStack(spacing: 20, pinnedViews: .sectionHeaders) {
                Section(header: columnHeaders) {
                    ForEach(0..<20) { row in
                        LazyHStack(spacing: 20, pinnedViews: .sectionHeaders) {
                            Section(header: rowHeader(with: "Employee \(row)")) {
                                ForEach(0..<100) { column in
                                    Text("Cell \(row), \(column)")
                                        .foregroundColor(.white)
                                        .font(.largeTitle)
                                        .frame(width: 200, height: 100)
                                        .background(Color.red)
                                        .onAppear {
                                            print("Cell \(row), \(column)")
                                        }
                                }
                            }
                        }
                    }
                }
            }
        }
    }
    
    var columnHeaders: some View {
        LazyHStack(spacing: 20, pinnedViews: .sectionHeaders) {
            Section(header: rowHeader(with: "")) {
                ForEach(0..<100) { column in
                    Text("Header \(column)")
                        .frame(width: 200, height: 100)
                        .background(Color.white)
                }
            }
        }
    }
    
    func rowHeader(with label: String) -> some View {
        Text(label)
            .frame(width: 100, height: 100)
            .background(Color.white)
    }
    
}

PS:我还需要固定的头文件,这是在上面的代码中使用pinnedViews实现的

7kqas0il

7kqas0il1#

通过使用一对嵌套的单轴ScrollView而不是一个多轴ScrollView,可以解决未对齐的问题。

相关问题