Swift/SwiftUI 背景图遮挡图片、文本等内容的问题该如何解决？

算力阿峰

2026-9-28

问题原因

你当前的布局使用VStack承载所有元素，背景图作为VStack的第一个子元素，会占用实际的垂直布局空间。加上你给背景图设置了edgesIgnoringSafeArea(.all)，背景图会直接撑满整个屏幕，后续的展示图、标题、艺术家文本全部被挤压到可视区域外，也就是你看到的「被背景遮挡」的效果。

修复方案

把布局外层换成ZStack：背景图放在ZStack的最底层作为全局背景，原来的内容VStack放在ZStack的上层，就不会被背景遮挡了。

修复后完整代码

struct MainView: View {
    var body: some View {
        // 外层用ZStack分层，底层放背景，上层放内容
        ZStack {
            // 背景层
            Image("acdemo")
                .edgesIgnoringSafeArea(.all)
                .blur(radius: 40.0)
            
            // 内容层，就是你原来的VStack
            VStack(alignment: .leading, spacing: -4.0) {
                Image("acdemo")
                    .renderingMode(.original)
                    .resizable()
                    .aspectRatio(contentMode: .fit)
                    .frame(width: 300.0, alignment: .top)
                    .cornerRadius(40.0)
                    .shadow(radius: 4)
                Spacer()
                    .frame(height: 30)
                Text("Title")
                    .font(.title)
                    .fontWeight(.bold)
                    .foregroundColor(Color.white)
                    .multilineTextAlignment(.leading)
                    .padding(.leading, 6.0)
                    .shadow(radius: 4)
                Text("Artist")
                    .font(.title)
                    .fontWeight(.regular)
                    .foregroundColor(Color.white)
                    .multilineTextAlignment(.leading)
                    .padding(.leading, 6.0)
                    .shadow(radius: 4)
            }
        }
    }
}