在 SwiftUI 中创建背景模糊的 RoundedRectangle答案

【问题标题】：Create Background-blurred RoundedRectangle in SwiftUI在 SwiftUI 中创建背景模糊的 RoundedRectangle
【发布时间】：2020-09-23 14:32:22
【问题描述】：

我正在使用此代码创建背景模糊视图：

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

但是，此代码返回一个带有背景模糊的常规矩形。怎么弄圆？

【问题讨论】：

外圆比内圆更好。

标签： ios swift swiftui

【解决方案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 结构之外执行此操作，您可以看看这个答案：

How can UIVisualEffectView be used inside of a circle?

【讨论】：

【解决方案2】：

您需要更改视觉效果视图的 2 个属性，cornerRadius 和 clipsToBounds。你的 makeUIView 函数看起来像

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
}

【讨论】：

【解决方案3】：

‘ struct BlurRectangle: View { var body: 一些视图 { 圆形矩形（角半径：25） .背景（模糊（）） .frame（宽度：100，高度：100） } }' 希望对你有帮助?

【讨论】：