Make all background UI blur after a view pop up-CodePudding

I plan to have a pop up view that blur out all the underlying UI behind it after it show, however my background "RoundedRectangle(cornerRadius: 20) .background( Color.white.opacity(0.7) )" did not show a transparent white or blur like I planned.

   var body: some View {
      ZStack() {
        NavigationStack {
            ZStack() {
                MyBackGround()
                VStack() {
                      TextField("username", text: $user)
                        .padding()
                        .background(.brown)
                      SecureField("password", text: $pw)
                        .padding()
                        .background(.brown)
                    Button("CONFIRM") {
                        popUp.toggle()
                    }
                    .padding()
                    .cornerRadius(20)
                    .padding()
                }
            }
        }
        if popUp {
            RoundedRectangle(cornerRadius: 20)
                .background(
                    Color.white.opacity(0.7)
                )
            MyPopUP()
        }
        }
       }

CodePudding user response：

I suggest using the provided SwiftUI .blur() for this context instead.

Add this line of code after your NavigationStack.

 NavigationStack{...}
      .blur(radius: popUp ? 10 : 0)
      if popUp {
          MyPopUP()
      }

CodePudding user response：

Your popup background is black because by default RoundedRectangle is filled with black color, so instead of adding background modifier we need to fill it with that color.

NavigationStack {
    // content ...
}
.blur(radius: popUp ? 5 : 0)  // to blur (constant is up to you)
.disabled(popUp)             // bluring does not prevent interaction

if popUp {
    // if semi-transparent background is still needed
    RoundedRectangle(cornerRadius: 20)
        .foregroundColor(Color.white.opacity(0.7)) // << here !!

    MyPopUP()
}