弹出视图后使所有背景 UI 模糊

Question

我计划有一个弹出视图，在它显示后模糊它背后的所有底层 UI，但是我的背景“RoundedRectangle（cornerRadius：20）.background（Color.white.opacity（0.7））”没有显示透明的白色或者像我计划的那样模糊。

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

Answer 1

我建议使用提供的 SwiftUI .blur()代替此上下文。

在NavigationStack之后添加这行代码。

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

Answer 2

您的弹出背景是黑色的，因为默认情况下RoundedRectangle填充黑色，所以我们需要用该颜色填充它而不是添加背景修饰符。

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