SwiftUI中在VStack底部放置Banner视图超出边界问题求助

问题原因 #

你遇到的.background(.red)超出边界的问题，本质是这种简写方式默认会让背景忽略安全区（等价于.background(.red, ignoresSafeAreaEdges: .all)），导致背景延伸到屏幕底部的安全区外；而Rectangle().fill(.red)是基于当前视图的frame绘制，会严格跟随Banner的布局范围，因此不会超出边界。

推荐实现方式 #

方式1：使用safeAreaInset（官方推荐） #

safeAreaInset是SwiftUI专门为在安全区边缘添加附加视图设计的API，会自动处理安全区适配，同时父视图内容会自动调整以避开Banner（如果需要）。

import SwiftUI
    
struct ContentView: View {
    var body: some View {
        Color.gray
            .safeAreaInset(edge: .bottom) {
                Text("Your subscription has expired, please renew it")
                    .font(.headline)
                    .foregroundColor(.white)
                    .padding(.vertical, 5)
                    .frame(maxWidth: .infinity)
                    .border(.white)
                    .background(.red)
            }
    }
}

#Preview {
    ContentView()
}

方式2：修改background的安全区忽略参数 #

如果坚持使用overlay，可以显式指定背景不忽略安全区边缘：

import SwiftUI
    
struct ContentView: View {
    var body: some View {
        VStack {
            Color.gray
        }
        .overlay(alignment: .bottom){
            Text("Your subscription has expired, please renew it")
                .font(.headline)
                .foregroundColor(.white)
                .padding(.vertical, 5)
                .frame(maxWidth: .infinity)
                .border(.white)
                .background(.red, ignoresSafeAreaEdges: []) // 禁止忽略任何安全区边缘
        }
    }
}

#Preview {
    ContentView()
}

方式3：保留Rectangle背景写法 #

你原来的Rectangle().fill(.red)写法本身是可行的，也可以简化为更直观的形式：

.background(Rectangle().fill(.red))
// 若需要圆角Banner，可替换为
.background(Capsule().fill(.red))

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