SwiftUI实现弹窗显示时主视图变灰的解决方案

你可以通过分层布局+动态视觉效果来实现需求，核心是用ZStack将主视图、灰色遮罩、弹窗分层，或者动态给主视图添加滤镜。以下是两种可行方案：

方案一：添加半透明灰色遮罩（推荐） #

这种方式视觉层级清晰，用户能明确感知弹窗的优先级：

修改后的MainView代码 #

struct MainView: View {
    @State private var showAlert = false

    var body: some View {
        ZStack {
            // 主视图内容区域
            VStack {
                // 这里放置你的主视图元素，比如按钮、文本等
                Button("打开弹窗") {
                    showAlert.toggle()
                }
                Text("主视图内容")
                    .font(.largeTitle)
            }
            .frame(maxWidth: .infinity, maxHeight: .infinity)
            .background(Color.white)

            // 弹窗激活时显示遮罩和弹窗
            if showAlert {
                // 半透明灰色背景，覆盖全屏
                Color.black.opacity(0.3)
                    .ignoresSafeArea()

                // 弹窗视图，位于遮罩上层
                AlertView(showAlert: $showAlert)
            }
        }
    }
}

修正后的AlertView代码 #

（修复你原代码中的语法错误）

struct AlertView: View {
    let screenSize = UIScreen.main.bounds
    @Binding var showAlert: Bool // 绑定变量无需初始化

    var body: some View {
        VStack {
            // 弹窗内部内容，比如关闭按钮
            Button("关闭弹窗") {
                showAlert.toggle()
            }
            Text("弹窗内容")
                .font(.title)
        }
        .frame(width: screenSize.width * 0.85, height: screenSize.height * 0.7)
        .background(Color.white)
        .cornerRadius(16) // 可选：给弹窗添加圆角优化视觉
    }
}

方案二：给主视图添加灰色滤镜 #

如果不想用遮罩，也可以直接通过滤镜让主视图呈现灰色调：

struct MainView: View {
    @State private var showAlert = false

    var body: some View {
        ZStack {
            VStack {
                Button("打开弹窗") {
                    showAlert.toggle()
                }
                Text("主视图内容")
                    .font(.largeTitle)
            }
            .frame(maxWidth: .infinity, maxHeight: .infinity)
            .background(Color.white)
            // 根据弹窗状态动态应用滤镜和透明度
            .colorEffect(showAlert ? .init(gray: 0.8, opacity: 1) : .identity)
            .opacity(showAlert ? 0.7 : 1)

            if showAlert {
                AlertView(showAlert: $showAlert)
            }
        }
    }
}

关键注意点 #

• 必须用ZStack分层，否则遮罩/弹窗无法覆盖在主视图之上
• 原代码中弹窗直接放在VStack之后，属于同一层级，无法实现遮罩效果
• 方案一的遮罩层用ignoresSafeArea()确保覆盖全屏（包括安全区）

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