SwiftUI：背景图加.ignoreSafeArea后底部按钮被拉伸的解决办法

你遇到的问题是因为背景图使用ignoresSafeArea()后，ZStack的布局范围扩展到了屏幕全屏（包括安全区外），而VStack默认会填充ZStack的整个高度，导致按钮被推到屏幕最底部，其背景被拉伸。以下是几种更优的解决方法：

方法一：限制VStack的安全区忽略范围 #

只让VStack忽略顶部安全区，底部保留安全区约束，这样按钮会停在安全区顶部，不会被拉伸到底部：

import SwiftUI

struct ContentView: View {
    var body: some View {
        ZStack {
            Image("background")
                .resizable()
                .ignoresSafeArea()
            VStack {
                Spacer()
                Button("Test") {
                    // Action
                }
                .font(.system(size: 50))
                .fontWeight(.heavy)
                .foregroundColor(Color.white)
                .padding(.horizontal)
                .background(Color.red)
            }
            .edgesIgnoringSafeArea(.top) // 仅忽略顶部安全区，底部遵守安全区
        }
    }
}

方法二：给按钮添加底部安全区间距 #

通过GeometryReader获取底部安全区高度，给按钮添加对应间距，确保按钮不会超出安全区：

import SwiftUI

struct ContentView: View {
    var body: some View {
        ZStack {
            Image("background")
                .resizable()
                .ignoresSafeArea()
            VStack {
                Spacer()
                Button("Test") {
                    // Action
                }
                .font(.system(size: 50))
                .fontWeight(.heavy)
                .foregroundColor(Color.white)
                .padding(.horizontal)
                .background(Color.red)
                .padding(.bottom, GeometryReader { $0.safeAreaInsets.bottom }.frame(height: 0))
            }
        }
    }
}

方法三：使用safeAreaInset（iOS 15+） #

给ZStack添加底部安全区嵌入，让按钮自动停在安全区内：

import SwiftUI

struct ContentView: View {
    var body: some View {
        ZStack {
            Image("background")
                .resizable()
                .ignoresSafeArea()
        }
        .safeAreaInset(edge: .bottom) {
            Button("Test") {
                // Action
            }
            .font(.system(size: 50))
            .fontWeight(.heavy)
            .foregroundColor(Color.white)
            .padding(.horizontal)
            .background(Color.red)
            .padding(.bottom, 8) // 可添加少量额外间距优化视觉
        }
    }
}

其中方法一最为简洁，既保留了背景图全屏的效果，又让按钮自动遵守底部安全区约束，不需要额外的占位Spacer。

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