Question 67784 in IOS Swift Question posted in
The official documentation can be found here.

Make all background UI blur after a view pop up – Ios swift

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()
        }
        }
       }

enter image description here

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    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()
      }

  2. 0

    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()
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search