SwiftUI中VStack含Spacer时最后元素背景超出边界问题

问题原因 #

当VStack仅在顶部放置一个Spacer时，这个Spacer会占据父容器的所有剩余空间，迫使VStack的布局范围拉伸至填满整个父容器——包括屏幕底部的安全区之外。而按钮的黄色背景直接作用在Text的padding外层，没有明确的宽度约束，在iOS14.2的布局引擎逻辑下，背景会跟随VStack的拉伸范围延伸，最终超出安全区和容器边界。

移除Spacer后，VStack的高度由内部元素总高度决定，不会被过度拉伸，因此背景能正常显示；在按钮后添加其他元素时，相当于给VStack底部添加了布局锚点，限制了VStack的拉伸范围，背景自然不会再乱跑。

iOS14.2兼容修复方法 #

方法1：约束按钮背景宽度 #

给按钮的文本标签添加frame(maxWidth: .infinity)，让背景撑满VStack的可用宽度，同时被VStack的宽度约束限制，不会超出安全区：

Button {
    // 点击逻辑
} label: {
    Text("Next")
        .padding()
        .frame(maxWidth: .infinity) // 强制宽度匹配父容器可用空间
        .background(Color.yellow)
}
.border(.black)

方法2：手动限制VStack底部边界 #

通过GeometryReader获取安全区Insets，给VStack添加底部内边距，确保其布局范围不超出安全区：

GeometryReader { geo in
    VStack(spacing: 30) {
        Spacer()

        Text("Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.")
        
        TextField("Some text", text: $model.trakingUrl) { val in
            
        }
            .textFieldStyle(PrimaryTextFieldStyle())
        Button {
            // 点击逻辑
        } label: {
            Text("Next")
                .padding()
                .background(Color.yellow)
        }
        .border(.black)
    }
    .padding(.bottom, geo.safeAreaInsets.bottom)
}

方法3：添加底部占位元素 #

在按钮后添加一个高度为0的透明视图，给VStack底部提供布局约束，避免其拉伸到安全区外：

VStack(spacing: 30) {
    Spacer()

    Text("Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.")
    
    TextField("Some text", text: $model.trakingUrl) { val in
        
    }
        .textFieldStyle(PrimaryTextFieldStyle())
    Button {
        // 点击逻辑
    } label: {
        Text("Next")
            .padding()
            .background(Color.yellow)
    }
    .border(.black)
    
    Color.clear.frame(height: 0) // 占位元素，锁定VStack底部边界
}

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