在 SwiftUI 中創建背景模糊的 RoundedRectangle

Question

我正在使用此代碼創建背景模糊視圖：

struct Blur: UIViewRepresentable {
    let style: UIBlurEffect.Style = .systemUltraThinMaterial

    func makeUIView(context: Context) -> UIVisualEffectView {
        return UIVisualEffectView(effect: UIBlurEffect(style: style))
    }

    func updateUIView(_ uiView: UIVisualEffectView, context: Context) {
        uiView.effect = UIBlurEffect(style: style)
    }
}

但是，此代碼返回一個背景模糊的常規矩形。 我如何使它變圓？

Answer 1

您可以創建另一個 SwiftUI 視圖：

struct BlurCircle: View {
    var body: some View {
        Blur()
            .clipShape(Circle())
    }
}

並像這樣使用它：

struct ContentView: View {
    var body: some View {
        BlurCircle()
            .frame(width: 100, height: 100)
    }
}

或者，您可以這樣做：

struct ContentView: View {
    var body: some View {
        Blur()
            .frame(width: 100, height: 100)
            .clipShape(Circle())
    }
}

---

如果您不想在Blur結構之外執行此操作，則可以查看以下答案：

• UIVisualEffectView 如何在圓圈內使用？

Answer 2

您需要更改視覺效果視圖的兩個屬性cornerRadius和clipsToBounds 。 你的makeUIView function 看起來像

func makeUIView(context: Context) -> UIVisualEffectView {[]
    let view = UIVisualEffectView(effect: UIBlurEffect(style: style))

    view.cornerRadius = 20  // change this to your radius
    view.clipsToBounds = true

    return view
}

Answer 3

' struct BlurRectangle: View { var body: some View { RoundRectangle(cornerRadius: 25).background(Blur()).frame(width: 100, height: 100) } } '希望對你有幫助