SwiftUI 点击弹窗按钮关闭弹窗并在主视图新增按钮的实现咨询

核心问题如下：

• 缺少showsCorrectOrIncorrect状态变量声明，会导致编译报错
• Start Order按钮的渲染逻辑写在了弹窗组件内部，弹窗关闭后自然不会显示，需要将其移到主视图层级
• 原实现中弹窗和主视图按钮放在同一VStack内，会出现视图挤压问题，调整为ZStack悬浮弹窗效果更符合常规交互

完整可运行修正代码 #

struct SelectLocation: View {
    @State private var showPopUp = false
    @State private var passCode: String = ""
    // 新增状态变量控制Start Order按钮显示
    @State private var showsCorrectOrIncorrect = false
    
    var body: some View {
        ZStack{
            VStack(spacing: 20) {
                Button(action: {
                    withAnimation {
                        self.showPopUp = true
                    }
                }, label: {
                    Text("Select Location")
                        .frame(minWidth: 0, maxWidth: 500)
                        .padding()
                        .background(Color.clear)
                        .foregroundColor(Color.black)
                        .font(.custom("Open Sans", size: 18))
                        .overlay(
                            RoundedRectangle(cornerRadius: 10)
                                .stroke(Color.gray, lineWidth: 2)
                        )
                })
                // 主视图底部新增Start Order按钮
                if showsCorrectOrIncorrect {
                    btnStart()
                }
            }
            .padding()
            
            // 弹窗改为悬浮层级，添加半透明遮罩
            if showPopUp {
                Color.black.opacity(0.3)
                    .ignoresSafeArea()
                    .onTapGesture {
                        // 可选：点击遮罩关闭弹窗
                        withAnimation {
                            showPopUp = false
                        }
                    }
                popupPassCode()
                    .transition(.opacity.combined(with: .scale))
            }
        }
    }
    
    
    func popupPassCode()-> some View {
        VStack(spacing: 20) {
            SecureField("Enter Code", text: $passCode)
                .frame(width: 300, height: 50, alignment: .leading)
                .cornerRadius(3.0)
                .overlay(RoundedRectangle(cornerRadius: 3.0)
                            .stroke(Color.gray, lineWidth: 1)
                )
                .padding(.horizontal)
            
            
            Button(action: {
                withAnimation {
                    self.showPopUp = false
                    self.showsCorrectOrIncorrect = true
                }
            }, label: {
                Text("Enter")
                    .frame(width: 150, height: 30)
                    .padding()
                    .background(Color.red)
                    .foregroundColor(Color.white)
                    .font(.custom("Open Sans", size: 28))
            })
        }
        .padding()
        .frame(width: 440, height: 300)
        .background(Color.white)
        .cornerRadius(20)
        .shadow(radius: 20 )
    }
    
    
    func btnStart() -> some View {
        Button(action: {
            // 后续添加Start Order按钮的点击逻辑
        }, label: {
            Text("Start Order")
                .frame(width: 150, height: 30)
                .background(Color.red)
                .foregroundColor(Color.white)
                .font(.custom("Open Sans", size: 28))
        })
    }
}

关键修改说明 #

• 新增@State private var showsCorrectOrIncorrect = false状态变量，控制Start Order按钮的显示
• 主视图VStack末尾添加Start Order按钮的渲染逻辑，保证按钮显示在Select Location按钮下方
• 调整弹窗层级，放在ZStack最上层并添加半透明遮罩，避免挤压主视图内容
• 移除弹窗内部的Start Order按钮渲染逻辑
• 新增弹窗出场动画和点击遮罩关闭弹窗的可选交互，符合常规使用习惯

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