SwiftUI ScrollView 不计算自定义交错网格高度

Question

我正试图在SwiftUI中创建一个新的网格结构，以显示具有可变高度的卡片。在这种程度上，我在一个HStack中使用了几个LazyVStack，并且有一个条件以正确的顺序显示我的数据项。该视图单独工作，根据屏幕大小调整列数，但在ScrollView中使用时，其大小计算不正确，以下视图最终位于网格下方，而不是网格下方。以下是我用于网格的代码：

struct StaggeredGrid<Element, Content>: View where Content: View {
var preferredItemWidth: CGFloat
var data: [Element] = []
var content: (Element) -> Content
init(preferredItemWidth: CGFloat, data: [Element], @ViewBuilder content: @escaping (Element) -> Content) {
self.preferredItemWidth = preferredItemWidth
self.data = data
self.content = content
}
var body: some View {
GeometryReader { geometry in
HStack(alignment: .top, spacing: 20) {
ForEach(1...Int(geometry.size.width / preferredItemWidth), id: .self) { number in
LazyVStack(spacing: 20) {
ForEach(0..<data.count, id: .self) { index in
if (index+1) % Int(geometry.size.width / preferredItemWidth) == number % Int(geometry.size.width / preferredItemWidth) {
content(data[index])
}
}
}
}
}
.padding([.horizontal])
}
}
}

以及显示行为的预览：

struct StaggeredGrid_Previews: PreviewProvider {
static var previews: some View {
ScrollView {
VStack {
StaggeredGrid(preferredItemWidth: 160, data: (1...10).map{"Item ($0)"}) { item in
Text(item)
.foregroundColor(.blue)
}
Text("I should be below the grid")
}
}
}
}

以下是预览图片：ScrollView 中出现错误

以及当ScrollView被注释掉时的图片：预期行为，ScrollView删除

提前感谢您对我不理解的这种行为的任何帮助或线索。

Answer 1

我引用@Asperi："ScrollView没有自己的大小，GeometryReader也没有自己的尺寸，所以你陷入了鸡蛋问题，即没有人知道要渲染的大小，所以崩溃了。对于ScrollView中的项目，必须有明确的框架大小">

在这里，您必须设置StaggeredGrid或其包含的GeometryReader的高度。在您的情况下，它的高度当然取决于内容的高度(即HStack(。你可以用阅读器读取这个高度(例如背景/覆盖的高度(。并使用它来确定您的GeometryReader 的帧大小

例如：

struct StaggeredGrid<Element, Content>: View where Content: View {
var preferredItemWidth: CGFloat
var data: [Element] = []
var content: (Element) -> Content
init(preferredItemWidth: CGFloat, data: [Element], @ViewBuilder content: @escaping (Element) -> Content) {
self.preferredItemWidth = preferredItemWidth
self.data = data
self.content = content
}

@State private var gridHeight: CGFloat = 100
var body: some View {
GeometryReader { geometry in
HStack(alignment: .top, spacing: 20) {
ForEach(1...Int(geometry.size.width / preferredItemWidth), id: .self) { number in
LazyVStack(spacing: 20) {
ForEach(0..<data.count, id: .self) { index in
if (index+1) % Int(geometry.size.width / preferredItemWidth) == number % Int(geometry.size.width / preferredItemWidth) {
content(data[index])
}
}
}
}
}
.overlay(GeometryReader { proxy in
Color.clear.preference(
key: HeightPreferenceKey.self,
value: proxy.size.height
)
})
.onPreferenceChange(HeightPreferenceKey.self) {
gridHeight = $0
}
.padding([.horizontal])
}
.frame(height: gridHeight)
}
}
private struct HeightPreferenceKey: PreferenceKey {
static let defaultValue: CGFloat = 0
static func reduce(value: inout CGFloat,
nextValue: () -> CGFloat) {
value = nextValue()
}
}