使用ignoresSafeArea修饰符的VStack在ContentView中无法居中的问题

问题说明 #

在 iPhone 14 Pro（iOS 16.4）调试时发现：当 VStack 内部绿色视图高度小于安全区高度（计算值为759）时，VStack 能正常居中；但当高度≥759时，VStack 会变成顶部对齐，不再居中。

复现代码 #

struct ContentView: View {
    var body: some View {
        VStack{
            Color.green
                .frame(width: 300,height: 759)
        }
        .border(Color.blue,width: 2)
        .ignoresSafeArea()
    }
}

现象对比 #

• 绿色视图高度为758时，VStack 居中显示：
  
• 绿色视图高度为759时，VStack 顶部对齐：
  

原因解析 #

这是 ignoresSafeArea 的作用逻辑加上 SwiftUI 的布局规则导致的：

1. 高度小于安全区时：VStack 的布局空间以安全区为基准，加上 VStack 默认的居中对齐，绿色视图会正常居中。此时 ignoresSafeArea 只是允许 VStack 超出安全区，但因为内容没超过安全区，整体布局不受影响。
2. 高度≥安全区时：VStack 会先被内部视图撑到对应高度，再通过 ignoresSafeArea 扩展到整个屏幕（包含顶部、底部的安全区外区域）。而 SwiftUI 对超出父容器的视图，默认会将视图顶部与父容器顶部对齐，所以看起来 VStack 不再居中。

解决办法 #

要让 VStack 无论子视图高度多少都保持居中，只需要给 VStack 添加 frame(maxWidth: .infinity, maxHeight: .infinity)，强制它先占据全屏空间，再用默认的居中对齐摆放内部视图：

struct ContentView: View {
    var body: some View {
        VStack{
            Color.green
                .frame(width: 300,height: 759)
        }
        .frame(maxWidth: .infinity, maxHeight: .infinity)
        .border(Color.blue,width: 2)
        .ignoresSafeArea()
    }
}

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