SwiftUI Overlay水平居中布局：A固定屏幕中心，B居其下30px

修复现有代码的水平居中问题 #

你当前的代码中，GeometryReader的内容默认采用左上角对齐，导致蓝色矩形无法水平居中。只需给GeometryReader添加全屏帧并设置居中对齐，即可解决：

struct ContentView: View {
    var body: some View {
        VStack {
            ZStack {
                Rectangle()
                    .fill(.red)
                    .frame(width: 200, height: 100)
                    .overlay {
                        GeometryReader { geo in
                            Rectangle()
                                .fill(.blue)
                                .frame(width: 100, height: 100)
                                .offset(y: geo.size.height + 30)
                        }
                        // 让GeometryReader内部内容水平居中
                        .frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .center)
                    }
            }
        }
    }
}

不过这种嵌套结构较为冗余，下面提供更简洁的最优实现。

最优视图结构（无需GeometryReader） #

核心思路是利用overlay的对齐特性，精准控制视图B的位置，同时保证视图A始终处于屏幕中心：

struct ContentView: View {
    var body: some View {
        ZStack {
            // 视图A：自动占满屏幕的ZStack会让它保持绝对居中
            Rectangle()
                .fill(.red)
                .frame(width: 200, height: 100)
                // 以视图A的底部为对齐基准添加视图B
                .overlay(alignment: .bottom) {
                    Rectangle()
                        .fill(.blue)
                        .frame(width: 100, height: 100)
                        // 向下偏移30px，实现与视图A底部的间距要求
                        .offset(y: 30)
                }
        }
        // 让ZStack占满整个屏幕，确保视图A的居中基准正确
        .frame(maxWidth: .infinity, maxHeight: .infinity)
    }
}

方案说明：

1. 外层ZStack设置全屏帧，确保内部视图的居中基准是整个屏幕，视图A会自动处于屏幕中心。
2. 使用.overlay(alignment: .bottom)将视图B锚定在视图A的底部边缘，天然保证水平居中（无论两者尺寸如何变化）。
3. 通过.offset(y: 30)让视图B向下移动30px，精准实现“视图A下方30px”的间距要求。
4. 整个结构无需手动计算尺寸，完全适配未知尺寸的视图A和B。

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