如何在 SwiftUI 中将模糊效果作为背景？

Posted 2023-02-24

【中文标题】如何在 SwiftUI 中将模糊效果作为背景？

【英文标题】：How can I have a Blur effect as a Background in SwiftUI?

【发布时间】：2020-11-27 14:00:43

【问题描述】：

我想将模糊效果作为我的视图的背景，正如我们所知，我们可以模糊视图和内部的内容，但我不希望模糊视图的内容，但我希望模糊背景视图以提供玻璃般的模糊效果众所周知，通过效果。我如何在 SwiftUi 中做到这一点？

换句话说，视图的下层将在当前视图的框架中模糊，设置为当前视图的背景。

目标：我希望看到背景模糊的 Hello world。

    import SwiftUI


struct ContentView: View 
    
    
    @State var showCustomAlertView: Bool = Bool()
    
    
    
    @State var stringOfText: String = "Hello, world!"
    
    
    var body: some View 
        
        
        ZStack 
            
            
            VStack 
                
                
                HStack 
                    Button(action: 
                        
                        withAnimation(.easeInOut(duration: 0.35))  showCustomAlertView.toggle() 
                        
                        print("trash info")
                        
                    )  Image(systemName: "trash") 
                    
                    Spacer()
                    
                .padding()
                
                
                Spacer()
                
                if showCustomAlertView  CustomAlertView(showCustomAlertView: $showCustomAlertView); Spacer() 
                
            .zIndex(1)
            
            
            
            VStack 
                
                ForEach (0..<16)  index in
                    
                    Text(stringOfText + String(index)).bold().padding(5)
                
                
                
                
                Button("update Text")  stringOfText = "Omid" .padding()
                
                Spacer()
                
                
            .padding().disabled(showCustomAlertView)
            
        
        
        
        
    
    






struct CustomAlertView: View 
    
    
    
    @Binding var showCustomAlertView: Bool
    

    var body: some View 
        
        let minValueOfScreen = 375-20
        
        
        ZStack 
            
            
            Color.white.opacity(1.0).cornerRadius(15).shadow(color: Color.black.opacity(0.5), radius: 50, x: 0, y: 0) // : Here I like to have Blured Background
            
            
            
            VStack 
                
                
                Spacer()
                
                Image(systemName: "trash").font(Font.system(size: 50))
                
                Spacer()
                
                Text("Are you Sure for deleting this File?").font(Font.title3.bold())
                
                
                Spacer()
                
                Text("You can't undo this action.")
                
                HStack 
                    
                    
                    Button("dismiss") 
                        
                        print("dismiss"); showCustomAlertView.toggle()
                        
                    .foregroundColor(Color.black).padding(.vertical, 10).padding(.horizontal, 40).background(Color(UIColor.systemGray4)).cornerRadius(10)
                    
                    Spacer()
                    
                    
                    Button("Delete") 
                        
                        print("Delete"); showCustomAlertView.toggle()
                        
                    .foregroundColor(Color.white).font(Font.body.bold()).padding(.vertical, 10).padding(.horizontal, 40).background(Color.blue).cornerRadius(10)
                    
                    
                    
                .padding(30)
                
            
            
            
            
            
            
        .frame(width: minValueOfScreen, height: minValueOfScreen, alignment: .center)
        
        
    
    

我的目标形象：

【问题讨论】：

这是否回答了您的问题***.com/a/59527255/12299030？还是这样***.com/a/64301261/12299030？

您的意思是要具有您发布的图像的外观吗？如果是这样，那是阴影，而不是模糊。这有帮助吗？：https://www.hackingwithswift.com/quick-start/swiftui/how-to-draw-a-shadow-around-a-view

【参考方案1】：

你可以使用

.blur(radius: showCustomAlertView ? 5 : 0)//<< here comes your blur

在您的视图上模糊视图。

【讨论】：

@ davidev : 非常感谢你的代码，但我现在已经有了那个代码，我希望警报区域变得模糊而不是所有屏幕

好吧..小姐当时就明白了。让我再次检查并编辑我的帖子