> For the complete documentation index, see [llms.txt](https://lochiwei.gitbook.io/ios/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://lochiwei.gitbook.io/ios/master/todo/custom-types/blurview.md).

# BlurView

可以讓在它下面的 view 變模糊。

![](https://1830103165-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M5-JmwCZMKh_d7RfBaN%2F-MK_CiYMYEqEojQKW-8Z%2F-MK_Dm6rBD2EZGHk9M_y%2FBlurView\(.ultraThin\).png?alt=media\&token=5fabe7e4-78f7-4398-aff1-5dd74615cd33)

{% tabs %}
{% tab title="🌅 BlurView" %}

```swift

import SwiftUI

// 🌅 BlurView
public struct BlurView: UIViewRepresentable {
    
    public typealias UIViewType = UIView
    let style: UIBlurEffect.Style
    
    public init(_ style: UIBlurEffect.Style = .systemMaterial) {
        self.style = style
    }
    
    public func makeUIView(context: UIViewRepresentableContext<BlurView>) -> UIView {
        
        // view (parent view)
        let view = UIView(frame: CGRect.zero)
        view.backgroundColor = .clear
        
        // ⭐️ blur effect
        let blurEffect = UIBlurEffect(style: style)
        // ⭐️ blur view (subview)
        let blurView = UIVisualEffectView(effect: blurEffect)
        blurView.translatesAutoresizingMaskIntoConstraints = false  // auto layout
        view.insertSubview(blurView, at: 0)
        // ⭐️ blurView.size == view.size
        NSLayoutConstraint.activate([
            blurView.widthAnchor.constraint(equalTo: view.widthAnchor),
            blurView.heightAnchor.constraint(equalTo: view.heightAnchor),
        ])
        
        return view
    }
    
    public func updateUIView(
        _ uiView: UIView, 
        context : UIViewRepresentableContext<BlurView>
    ) { }
}
```

{% endtab %}

{% tab title="💈 範例" %}

```swift
import SwiftUI
import PlaygroundSupport

struct ContentView: View {
    var body: some View {
        ZStack {
            
            // contents below BlurView
            RoundedRectangle(cornerRadius: 10)
                .fill(Color.white)
                .frame(width: 200, height: 150)
                .overlay(Circle().fill(Color.pink).padding(30))
            
            // contents on top of BlurView
            VStack {
                Capsule().fill(Color.gray.opacity(0.4))
                    .frame(width: 60, height: 4)
                    .padding(.top, 10)
                    .padding(.bottom, 20)
                Text("Blur View")
                Text("style: .systemUltraThinMaterial")
                    .font(.caption)
                    .foregroundColor(.secondary)
                Spacer()
            }//
                .frame(maxWidth: .infinity)
                // ⭐️ BlurView
                .background(BlurView(.systemUltraThinMaterial))
                .cornerRadius(20).offset(y: 134)
            
        }// container (ZStack)
            .padding()
            .shadow(radius: 8)
            .background(Color.gray)
            .cornerRadius(10)
            .frame(width: 400, height: 300)
    }
}

PlaygroundPage.current.setLiveView(ContentView())
```

{% endtab %}

{% tab title="📘 參考" %}

* [ ] [Background Blur](https://designcode.io/swiftui-handbook-background-blur) - Design + Code
  {% endtab %}

{% tab title="💬 討論" %}

* [Is there a method to blur a background in SwiftUI?](https://stackoverflow.com/questions/56610957/is-there-a-method-to-blur-a-background-in-swiftui) - SO
  {% endtab %}
  {% endtabs %}