如何点击SwiftUI视图外部区域隐藏自定义弹窗视图

要实现点击弹窗外部区域关闭弹窗，核心思路是给弹窗添加全屏透明背景层，点击背景层时触发关闭逻辑，同时确保弹窗内部的点击不会透传到背景层。具体修改步骤如下：

1. 修正主视图（MainView）的结构 #

将弹窗作为叠加层放在主内容之上，用ZStack组织视图层级，同时添加全屏透明背景处理外部点击：

struct MainView: View {
    @State private var alertIsShown = false
    @State var liveOrdersList: [String] = ["item-1", "item-2"]

    var body: some View {
        ZStack {
            // 主内容区域
            VStack{
                NavigationView{
                    List{
                        ForEach(liveOrdersList, id: \.self) { order in
                            HStack {
                                VStack(alignment: .leading){
                                    Text(order) // 修正原代码中order.totalPrice的错误（order为String类型）
                                }
                                Spacer()
                                Button("add") {
                                    withAnimation(.linear(duration: 0.3)) {
                                        alertIsShown.toggle()
                                    }
                                }
                            }
                        }
                    }
                }
            }
            
            // 弹窗及背景层
            if alertIsShown {
                // 全屏半透明背景，点击时关闭弹窗
                Color.black.opacity(0.3)
                    .ignoresSafeArea()
                    .onTapGesture {
                        withAnimation(.linear(duration: 0.3)) {
                            alertIsShown = false
                        }
                    }
                    .overlay(
                        // 弹窗视图，确保内部点击不触发背景的点击事件
                        AlertView(alertIsShown: $alertIsShown)
                            .contentShape(Rectangle())
                            .allowsHitTesting(true)
                    )
            }
        }
    }
}

2. 优化弹窗视图（AlertView）的代码 #

修正原代码语法错误，优化动画触发逻辑：

struct AlertView: View{
    let screenSize = UIScreen.main.bounds
    @Binding var alertIsShown: Bool

    var body: some View{
        VStack{
            Button("Cancel") {
                withAnimation(.linear(duration: 0.3)) {
                    alertIsShown = false
                }
            }
        }
        .padding()
        .frame(width: screenSize.width * 0.85, height: screenSize.height * 0.6)
        .background(Color(red: 0.4627, green: 0.8392, blue: 1.0))
        .clipShape(RoundedRectangle(cornerRadius: 20.0, style: .continuous))
        .offset(y: alertIsShown ? 0 : screenSize.height)
        .animation(.spring(), value: alertIsShown) // 用value参数精准触发动画
        .shadow(color: Color(.white), radius: 6, x: -9, y: 0)
    }
}

关键逻辑说明 #

• 全屏背景层：用半透明黑色背景覆盖整个屏幕，点击时修改alertIsShown状态关闭弹窗，同时提供遮罩效果增强弹窗的视觉层级。
• 阻止点击穿透：通过.contentShape(Rectangle())和.allowsHitTesting(true)确保弹窗内部的点击事件不会被背景层捕获，只有点击弹窗外部区域才会触发关闭。
• 动画一致性：在关闭弹窗时添加对应动画，保持显示/隐藏的过渡效果统一。

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