正如标题所述,我尝试构建一个在垂直和水平方向上都能缓慢加载的Grid视图,主要目标是为员工列表构建一个日历,列表和日历的时间间隔都可能非常大,因此必须延迟呈现。我尝试过LazyHGrid
和LazyVGrid
,但它们只能延迟呈现一个方向的视图。进一步的方法是对整个视图使用一个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
实现的
1条答案
按热度按时间7kqas0il1#
通过使用一对嵌套的单轴ScrollView而不是一个多轴ScrollView,可以解决未对齐的问题。