嵌套ScrollView中LazyHStack未适配子视图高度问题求助

问题原因 #

这是LazyHStack的预期行为。LazyHStack的核心是懒加载，它只会计算当前可见（或即将可见）子视图的布局尺寸，不会提前遍历所有子视图来确定最大高度。因此外层的水平ScrollView会默认以第一个加载的子视图（即较矮的"Short View"）的高度作为自身高度，导致后续加载的高个子视图被截断。

你尝试的maxHeight: .infinity和.fixedSize()无效的原因：

• .frame(maxHeight: .infinity)会让水平ScrollView占满垂直ScrollView的可用空间，但这不是子视图的实际最大高度，不符合需求；
• .fixedSize()会让视图根据初始内容尺寸固定大小，而LazyHStack初始仅加载第一个子视图，所以只会适配它的高度，后续子视图加载后不会自动更新尺寸。

解决方案（保持懒加载特性） #

通过PreferenceKey收集所有已加载子视图的高度，动态更新水平ScrollView的最小高度。这种方法既保留LazyHStack的懒加载，又能让水平ScrollView适配所有子视图中的最大高度。

完整代码示例 #

import SwiftUI

// 定义PreferenceKey用于收集子视图高度
struct ViewHeightKey: PreferenceKey {
    static var defaultValue: CGFloat = 0
    static func reduce(value: inout CGFloat, nextValue: () -> CGFloat) {
        value = max(value, nextValue())
    }
}

struct TestView: View {
    @State private var maxContentHeight: CGFloat = 0
    
    var body: some View {
        ScrollView(.vertical) {
            VStack {
                ScrollView(.horizontal) {
                    LazyHStack(alignment: .top) {
                        createView(title: "Short View", height: 100)
                        createView(title: "Long View", height: 500)
                    }
                }
                // 动态设置水平ScrollView的最小高度为已加载子视图的最大高度
                .frame(minHeight: maxContentHeight)
                // 监听高度变化并更新
                .onPreferenceChange(ViewHeightKey.self) { newHeight in
                    maxContentHeight = newHeight
                }
            }
        }
    }
    
    func createView(title: String, height: CGFloat) -> some View {
        VStack {
            Text(title)
            Rectangle()
                .frame(width: 100, height: height)
            Spacer()
        }
        // 通过GeometryReader获取子视图高度，并通过PreferenceKey传递
        .background(
            GeometryReader { proxy in
                Color.clear
                    .preference(key: ViewHeightKey.self, value: proxy.size.height)
            }
        )
    }
}

#Preview {
    TestView()
}

方案说明 #

1. PreferenceKey：自定义ViewHeightKey用于收集所有子视图的高度，并取最大值；
2. GeometryReader：在每个子视图的背景中添加GeometryReader，获取当前子视图的实际高度；
3. 动态更新高度：通过onPreferenceChange监听高度变化，将水平ScrollView的最小高度设置为已加载子视图的最大高度。当滚动到高个子视图时，它会被懒加载，此时PreferenceKey会收集到更高的高度，水平ScrollView会自动调整高度以适配。

内容的提问来源于stack exchange，提问作者programr