I am using this code to create a background-blurred view:
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)
}
}
However, this code returns a regular rectangle with background blur. How do I make it rounded?
You can create another SwiftUI view:
struct BlurCircle: View {
var body: some View {
Blur()
.clipShape(Circle())
}
}
and use it like this:
struct ContentView: View {
var body: some View {
BlurCircle()
.frame(width: 100, height: 100)
}
}
Alternatively, you can just do:
struct ContentView: View {
var body: some View {
Blur()
.frame(width: 100, height: 100)
.clipShape(Circle())
}
}
If you don't want to do this outside the Blur
struct, you can take a look at this answer:
You need to change 2 properies of your visual effect view, cornerRadius
and clipsToBounds
. Your makeUIView
function would look like
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
}
' struct BlurRectangle: View { var body: some View { RoundRectangle(cornerRadius: 25).background(Blur()).frame(width: 100, height: 100) } } ' Hope it's helpful
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.