SwiftUI - 当单击弹出窗口中的按钮时，关闭弹出窗口并将按钮添加到当前主视图

Question

我是 swiftUI 的新手。 我有一个按钮，单击它会显示一个弹出视图。单击弹出窗口中的关闭按钮时，它应该关闭弹出视图并在主视图上添加一个新按钮。任何帮助表示赞赏。这是我的代码

struct SelectLocation: View {
    @State private var showPopUp = false
    @State private var passCode: String = ""
    
    var body: some View {
        ZStack{
            VStack{
                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)
                        )
                })
                if(self.showPopUp){
                    
                    popupPassCode()
                }
            }
        }
    }
    
    
    func popupPassCode()-> some View {
        
        VStack{
            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()
            
            
            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))
            })
            if showsCorrectOrIncorrect {
                btnStart()
            }
            
        }
        .padding()
        .frame(width: 440, height: 300)
        .background(Color.white)
        .cornerRadius(20)
        .shadow(radius: 20 )
        
    }
    
    
    func btnStart() -> some View {
        
        VStack{
            Button(action: {
                
            }, label: {
                Text("Start Order")
                    .frame(width: 150, height: 30)
                    
                    .background(Color.red)
                    .foregroundColor(Color.white)
                    .font(.custom("Open Sans", size: 28))
            })
            
        }
        
    }
}

当点击弹出窗口中的 Enter 按钮时，它应该在主视图的底部添加一个新按钮（表示具有“选择位置”按钮的视图）

Answer 1

使用struct 代替function 作为开始按钮，当showPopUp 和showsCorrectOrIncorrect 为true 时弹出并显示它们。

struct SelectLocation: View {
   @State private var showPopUp = false
   @State private var passCode: String = ""
   @State var showsCorrectOrIncorrect = false
   var body: some View {
       ZStack{
           VStack{
               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)
                       )
               })
              
               if showPopUp {
                   PopUpPassCode(passCode: $passCode, showPopUp: $showPopUp, showsCorrectOrIncorrect: $showsCorrectOrIncorrect)
               }
               
               if showsCorrectOrIncorrect {
                   StartButton()
               }
           }
       }
   }
}



struct PopUpPassCode: View {
   @Binding var passCode: String
   @Binding var showPopUp: Bool
   @Binding var showsCorrectOrIncorrect: Bool
   
   var body: some View {
       VStack{
           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()
   
           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 )
   }
}


struct StartButton: View {
   var body: some View {
       VStack{
           Button(action: {
               
           }, label: {
               Text("Start Order")
                   .frame(width: 150, height: 30)
                   
                   .background(Color.red)
                   .foregroundColor(Color.white)
                   .font(.custom("Open Sans", size: 28))
           })
           
       }
   }
}