如何让LazyHStack高度匹配其中最高的子项

你的需求是：横向滚动的LazyHStack默认会沿用第一个子项的高度，导致后续更高的内容被截断，但希望保留LazyHStack的懒加载特性，让容器能动态匹配已加载子项中的最高高度，滚动时动态调整也可接受。

核心思路是实时追踪已加载子项的最大高度，将LazyHStack的容器高度绑定为这个最大值，滚动时新出现的更高子项会自动更新容器高度。

修改后的代码如下：

import SwiftUI

struct ContentView: View {
    let items = ["Short", "Also short", "Short again", "But this is veeeery veeeery looong!"]
    // 存储当前已加载子项的最大高度
    @State private var maxHeight: CGFloat = 0
    
    var body: some View {
        ScrollView(.vertical) {
            VStack {
                ScrollView(.horizontal) {
                    LazyHStack {
                        ForEach(0 ..< items.count) { index in
                            Text(items[index])
                                .frame(width: 150)
                                // 通过GeometryReader获取当前子项的高度
                                .background(
                                    GeometryReader { geo in
                                        Color.clear
                                            .onAppear {
                                                // 更新最大高度
                                                if geo.size.height > maxHeight {
                                                    maxHeight = geo.size.height
                                                }
                                            }
                                    }
                                )
                        }
                    }
                    // 让LazyHStack容器高度始终匹配当前最大高度
                    .frame(height: maxHeight)
                }
                Text("Some static content here")
            }
        }
    }
}

关键逻辑说明： #

• 用@State private var maxHeight记录所有已显示子项的最高高度。
• 每个Text子项通过GeometryReader获取自身高度，在onAppear时对比并更新maxHeight。
• 给LazyHStack设置.frame(height: maxHeight)，让容器高度随已加载的最高子项动态调整。
• 由于LazyHStack是懒加载的，只有子项进入视图时才会触发高度计算，容器高度会随着滚动逐步更新到全局最大高度，符合你对动态调整的接受度。

内容的提问来源于stack exchange，提问作者Konstantin.Efimenko