iOS14中SwiftUI Spacer仅生效至屏幕一半的问题排查

问题现象 #

一段简单的SwiftUI代码在iOS16上表现正常：upper文本固定在屏幕顶部，bottom文本固定在屏幕底部；但在iOS14中启动应用时，bottom文本会在约半秒内从底部向上移动到屏幕中间，Spacer仅能生效到屏幕一半的位置。

代码示例 #

struct RootView: View {
    
    var body: some View {
        VStack {
           Text("upper")
            
           Spacer()
        
           Text("bottom")
        }
    }
}

原因分析 #

这是iOS14版本SwiftUI的根视图布局计算bug：

• 当RootView作为窗口的根视图时，iOS14系统初始计算视图尺寸时，没有正确将根视图的高度设置为屏幕全屏高度，而是先使用了一个仅覆盖安全区上方区域的默认高度。
• 系统后续会自动修正根视图的尺寸，但这个修正过程会触发布局重绘，而iOS14的布局更新默认带有隐式动画，就导致了bottom文本上移的视觉异常。

解决方法 #

给根视图的VStack添加明确的全屏尺寸约束，强制系统一开始就按照全屏尺寸计算布局：

struct RootView: View {
    
    var body: some View {
        VStack {
           Text("upper")
            
           Spacer()
        
           Text("bottom")
        }
        .frame(maxWidth: .infinity, maxHeight: .infinity)
    }
}

也可以直接给RootView本身添加该约束，效果一致。

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