按下按钮时模糊视图 swiftui

Question

我有一个视图底部有一个工具栏。单击时 - 显示两个按钮。我试图实现当按下工具栏并且现在显示按钮时，视图（或背景）变为 blurred/grayed，除了新生成的项目。

我附上了我想要达到的效果的截图。

struct UserDashController: View {
    
   // @State private var showMealView = false
    @State private var showSettingsView = false
    @State private var showAddViews = false

    @State private var angle: Double = 0
    
    init(){
        UIToolbar.appearance().barTintColor = UIColor.white
    }
    
    var body: some View {
        NavigationView {
            VStack{
               Text("Blue me Please")
                    .frame(width: 400, height:600)
                    .background(.orange)
            }
            //sets setting bar top right
                .toolbar {
                    ToolbarItem(placement: .navigationBarTrailing) {
                        VStack{
                            Button(action: {
                                showSettingsView.toggle()
                            }) {
                                Image(systemName: "line.3.horizontal")
                                    .font(.title3)
                                    .foregroundColor(.black)
                            }
                            .sheet(isPresented: $showSettingsView){
                                JournalEntryMain()
                            }
                        }
                   }
                    
                   // sets add meal option bottom/center
                    ToolbarItem(placement: .bottomBar) {

                        //displaying add meal and recipe icons when clicked
                        HStack{

                            Button(action: {
                                angle += 90
                                showAddViews.toggle()

                            }) {

                                if showAddViews {
                                    VStack{
                                        AddToolbar(showAddOptions: $showAddViews)
                                            .offset(y:-50)
                                    }

                                }

                            Image(systemName: "plus.square")
                                .opacity(showAddViews ? 0.5 : 1)
                                .font(.largeTitle)
                                .foregroundColor(.black)
                                .rotationEffect(.degrees(angle))
                                .animation(.easeIn(duration: 0.25), value: angle)
                        }
                    }
                }
            }
        }
    }
}

按下工具栏时出现的按钮

 struct AddToolbar: View {
    
    @Binding var showAddOptions: Bool
    @State var showMealView = false
    
    var body: some View {
        
        HStack{
            VStack{
                Button(action: {
                    showMealView.toggle()
                }){
                    VStack{
                Image(systemName: "square.and.pencil")
                    .font(.title)
                    .foregroundColor(.black)
                    .background(Circle()
                        .fill(.gray)
                        .frame(width:50, height:50))
                    .padding(3)
                
                Text("Meal")
                    .foregroundColor(.black)
                    }
                }.fullScreenCover(isPresented: $showMealView){
                    JournalEntryMain()
                }
            }
            VStack{
                Image(systemName: "text.book.closed")
                    .foregroundColor(.black)
                    .font(.title)
                    .background(Circle()
                        .fill(.gray)
                        .frame(width:50, height:50))
                    .padding(3)
                
                Text("Recipe")
                    .foregroundColor(.black)
                }
            .offset(y: -50)
            }
        .frame(height:150)
        }
    }

期望的效果

Answer 1

我对你想要的效果示例有点困惑，部分原因是在你附加的 UI 屏幕截图中，背景没有模糊，只是变暗了。因此，以下答案并非针对您的具体示例，但仍然可以提供帮助。

假设您用来确定是否显示工具栏的变量是 showSettingsView。您可以在 background 视图上添加以下修饰符：

至模糊：.blur(showSettingsView ? 0.5 : 0.0)
要变暗：.brightness(showSettingsView ? -0.5 : 0.0)

显然，只需将“0.5”替换为您认为最好的数字即可。

按下按钮时模糊视图 swiftui

Blur view when button is pressed swiftui

swift

swiftui