SwiftUI：如何让视图超出安全区并在屏幕上下间居中布局？

要实现三张1:1比例的图片填满屏幕宽度，中间图居中显示、上下图超出屏幕边缘的效果，你可以通过GeometryReader获取容器尺寸结合偏移调整来实现，避免直接使用UIScreen.main.bounds（SwiftUI中推荐用容器尺寸而非屏幕尺寸，适配性更好）。

完整代码示例 #

var body: some View {
    GeometryReader { geometry in
        VStack(spacing: 0) { // 取消图片间距，避免额外占用空间
            Image("someImage")
                .resizable()
                .aspectRatio(1, contentMode: .fit)
                .frame(width: geometry.size.width)
            
            Image("someImage")
                .resizable()
                .aspectRatio(1, contentMode: .fit)
                .frame(width: geometry.size.width)
            
            Image("someImage")
                .resizable()
                .aspectRatio(1, contentMode: .fit)
                .frame(width: geometry.size.width)
        }
        // 计算偏移量：让中间图片垂直居中
        .offset(y: (geometry.size.height - 3 * geometry.size.width) / 2)
        // 禁止VStack压缩内容，保持图片原始比例
        .fixedSize(horizontal: false, vertical: true)
    }
    .ignoresSafeArea() // 忽略安全区域，让图片可以超出屏幕顶部/底部的安全区
}

关键说明 #

• GeometryReader：获取当前视图的可用尺寸，替代UIScreen.main.bounds，适配不同设备的安全区域、分屏等场景。
• aspectRatio(1, contentMode: .fit)：强制图片保持1:1比例，避免被拉伸或压缩。
• offset(y: ...)：计算偏移量让中间图片居中：总图片高度是3*屏幕宽度，屏幕高度与总图片高度的差值的一半就是需要向上偏移的距离，这样中间图片的中心会与屏幕中心对齐，上下两张自然超出屏幕边缘。
• fixedSize(vertical: true)：阻止VStack压缩垂直方向的内容，确保图片保持完整的1:1尺寸。
• ignoresSafeArea()：让图片可以延伸到屏幕的顶部/底部边缘（比如刘海、底部小黑条区域），如果不需要忽略安全区可以去掉这一行。

简化优化（复用图片视图） #

如果三张图片是相同的，可以提取成复用视图减少重复代码：

private func squareImage() -> some View {
    Image("someImage")
        .resizable()
        .aspectRatio(1, contentMode: .fit)
}

var body: some View {
    GeometryReader { geometry in
        VStack(spacing: 0) {
            squareImage()
            squareImage()
            squareImage()
        }
        .frame(width: geometry.size.width)
        .offset(y: (geometry.size.height - 3 * geometry.size.width) / 2)
        .fixedSize(horizontal: false, vertical: true)
    }
    .ignoresSafeArea()
}

内容的提问来源于stack exchange，提问作者meaning-matters