I would like to create a card component in SwiftUI. The only element missing is the blurred background of the top bar. I have tried using the approach mentioned in this thread but for me it only resulted in a gray background bar.
BlurView
struct VisualEffectView: UIViewRepresentable {
var effect: UIVisualEffect?
func makeUIView(context: UIViewRepresentableContext<Self>) -> UIVisualEffectView { UIVisualEffectView() }
func updateUIView(_ uiView: UIVisualEffectView, context: UIViewRepresentableContext<Self>) { uiView.effect = effect }
}
My View:
var body: some View {
ZStack {
Image("Vegetarische-Pizza")
.resizable()
.aspectRatio(contentMode: .fill)
.frame(height: 160.0)
.cornerRadius(8.0)
VStack {
ZStack {
VisualEffectView(effect: UIBlurEffect(style: .prominent))
HStack {
Image("Star")
.resizable()
.aspectRatio(contentMode: .fit)
.frame(height: 20.0)
Spacer()
Text("Vegetarische Pizza")
.font(FontManager.headline3)
.foregroundColor(ColorManager.meal)
Spacer()
Image("Leaf")
.resizable()
.aspectRatio(contentMode: .fit)
.frame(height: 20.0)
}
.padding(4.0)
}
.frame(height: 30.0)
Spacer()
ZStack {
Rectangle()
.foregroundColor(.clear)
.background(LinearGradient(gradient: .init(colors: [ColorManager.meal_gradient, .clear]), startPoint: .bottom, endPoint: .top))
.frame(height: 30)
.cornerRadius(8.0)
Text("Montag, 07.12.2020")
.font(FontManager.headline3)
.foregroundColor(ColorManager.meal)
}
}
}
.frame(height: 160.0)
}