SwiftUI中Save按钮底部留白来源排查求助

问题根源 #

你的代码中，VStack默认遵循系统安全区域的布局约束，底部会自动留出安全区域内边距。虽然ZStack里的背景色添加了.ignoresSafeArea()，但VStack作为独立子视图并未继承该设置，再加上Spacer()将按钮推到VStack底部，就出现了底部留白。

解决方案 #

给VStack添加底部安全区域忽略修饰符即可消除留白：

import SwiftUI

struct test: View {
    @Environment(\.dismiss) private var dismiss
    var body: some View {
        ZStack{
            Color.DesignSystem.background.ignoresSafeArea()
            VStack(spacing: 20){
                    Spacer()
                    Button {
                    } label: {
                        Text("Save")
                            .font(.fontRegular(size: 20))
                            .tint(.white)
                            .padding()
                            .frame(maxWidth: .infinity)
                            .background(Color.DesignSystem.blue)
                            .clipShape(RoundedRectangle(cornerRadius: 12))
                    }
                
            }
            .background(.black)
            .padding(.horizontal, 80)
            .padding(.top, 12)
            .ignoresSafeArea(edges: .bottom) // 新增该行
        }
    }
}

#Preview {
    test()
}

补充说明 #

• 若需要让VStack完全不受安全区域影响（包括顶部），可直接使用.ignoresSafeArea()，但此时你设置的.padding(.top, 12)需根据需求调整，因为顶部安全区域间距会被忽略。
• 安全区域布局是SwiftUI默认行为，用于避免内容被设备刘海、底部横条等遮挡，仅在明确需要内容贴合边缘时，才需手动忽略对应边缘的安全区域。

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