SwiftUI中GeometryReader引发视图重叠布局异常如何解决

布局重叠的核心原因是GeometryReader没有固有内容尺寸，在ScrollView的纵向滚动布局上下文里，它会默认尽可能占据所有可用空间，不会根据内部子视图的高度自适应，因此会和上下排布的HStack、Button发生重叠覆盖，哪怕外层套VStack也不会改变这个特性。

不需要把需要尺寸的CustomView直接嵌套在GeometryReader内部，用非侵入式的尺寸读取方式即可，完全不破坏原有布局流，还能准确拿到容器宽度：

1. 先定义一个用于传递尺寸值的PreferenceKey

struct ContainerWidthPreferenceKey: PreferenceKey {
    static var defaultValue: CGFloat = 0
    static func reduce(value: inout CGFloat, nextValue: () -> CGFloat) {
        value = nextValue()
    }
}

2. 修改原有视图代码，把GeometryReader移到背景层读取尺寸，主布局流保持正常的VStack/HStack排布

struct DemoView: View {
    @State private var containerWidth: CGFloat = 0
    
    var body: some View {
        ScrollView {
            VStack {
                HStack {
                    Text("Something")
                    Text("Something")
                }
                
                // 正常排布自定义视图，不需要被GeometryReader包裹
                VStack {
                    CustomView(param: containerWidth * 0.3)
                    CustomView(param: containerWidth * 0.3)
                    CustomView(param: containerWidth * 0.3)
                }
                // 背景层挂载GeometryReader读取宽度，不会干扰布局
                .background(
                    GeometryReader { geo in
                        Color.clear
                            .preference(key: ContainerWidthPreferenceKey.self, value: geo.size.width)
                    }
                )
                // 读取到宽度后更新状态，传递给CustomView
                .onPreferenceChange(ContainerWidthPreferenceKey.self) { newWidth in
                    containerWidth = newWidth
                }
                
                Button(action: {
                    print("Hey")
                }) {
                    Text("Push me")
                }
            }
            .padding()
        }
    }
}

• 背景层的GeometryReader会自动匹配宿主视图（包裹三个CustomView的VStack）的实际尺寸，既能拿到准确的可用宽度，又不会出现强行撑满ScrollView高度的问题
• 主布局流完全按照SwiftUI默认的VStack排布规则渲染，不会出现视图重叠
• 如果需要读取高度值，只需要修改PreferenceKey传递的值为geo.size.height即可，逻辑完全一致

如果你的三个CustomView高度是固定可计算的，也可以直接给原有代码里的GeometryReader加明确的.frame(height: 总高度值)约束，强制限定它的高度，也能解决重叠问题，但灵活性不如上面的非侵入方案。

注意：不要在ScrollView的主布局流中直接放置无明确高度约束的GeometryReader，ScrollView的子视图不会获得确定的高度约束，会直接触发GeometryReader撑满可用空间的默认行为。

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