Conditional component in SwiftUI-CodePudding

I'm giving my first steps with SwiftUI and I'm having problems with a component shown depending on a condition.

I'm trying to show a fullscreen popup (full screen with semi transparent black background and the popup in the middle with white background). To achieve this I've made this component:

struct CustomUiPopup: View {
    
    var body: some View {
        
        ZStack {
        }
        .overlay(CustomUiPopupOverlay, alignment: .top)
        .zIndex(1)
    }


    private var CustomUiPopupOverlay: some View {
        
        ZStack {
            
            Spacer()
            
            ZStack {
                
                Text("POPUP")
                    .padding()
                
            }
            .zIndex(1)
            .frame(width: UIScreen.main.bounds.size.width - 66)
            .background(Color.white)
            .cornerRadius(8)
            
            Spacer()
        }
        .frame(width: UIScreen.main.bounds.size.width, height: UIScreen.main.bounds.size.height)
        .background(Color.black.opacity(0.6))
    }
}

If I set this in my main view, the popup is shown correctly over the button:

struct MainView: View {
    
    var body: some View {
        
        CustomUiPopup()

        Button("Click to show popup") {
            print("click on button")
        }

    }
}

If I set this, my popup is not shown (correct because hasToShowPopup is false), but if I click on the button it fails, the popup is not shown and the button can not be clicked again (?!), it seems like the view was freezed.

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

    var body: some View {
        
        if hasToShowPopup {
            CustomUiPopup()
        }

        Button("Click to show popup") {
            hasToShowPopup = true
        }

    }
}

I've even tried to initializate hasToShowPopup to true but the popup keeps failing, it's not shown in the first place:

struct MainView: View {
    
    @State private var hasToShowPopup = true

    var body: some View {
        
        if hasToShowPopup {
            CustomUiPopup()
        }

        Button("Click to show popup") {
            hasToShowPopup = true
        }

    }
}

So my conclusion is that, I don't know why, but if I put my CustomUiPopup inside an "if" something is not rendered correctly.

What is wrong with my code?

Anyway, if this is not the correct approach to show a popup, I'll be glad to have any advice.

Following Ptit Xav suggestion I've tried this with the same results (my CustomUiPopup doesn't show):

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

    var body: some View {
        
        VStack {
            if hasToShowPopup {
                CustomUiPopup()
            }

            Button("Click to show popup") {
                hasToShowPopup = true
            }
        }
    }
}

CodePudding user response：

This works fine with me:

struct CustomUiPopup: View {
    
    var body: some View {
        
        ZStack {
            Spacer()
            
            Text("POPUP")
                .padding()
                .zIndex(1)
                .frame(width: UIScreen.main.bounds.size.width - 66)
                .background(Color.white)
                .cornerRadius(8)
            
            Spacer()
        }
        .frame(maxWidth: .infinity, maxHeight: .infinity)
        .background(
            Color.black.opacity(0.6)
                .ignoresSafeArea()
        )
    }
}


struct ContentView: View {
    
    @State private var hasToShowPopup = false

    var body: some View {
        ZStack {
            Button("Click to show popup") {
                hasToShowPopup = true
            }
            if hasToShowPopup {
                CustomUiPopup()
            }
        }
    }
}