0

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.

The card I'd like to create.

The way it looks right now.

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)

}
derivmug
  • 163
  • 1
  • 7
  • I have tested your code and in the preview it is indeed gray but when i tested it in the simulator it worked. – Răzvan Rujoiu Dec 07 '20 at 08:34
  • Is there a way to change the style of the blur instead of using the system defaults, i.e. changing the blur radius? – derivmug Dec 07 '20 at 08:50

0 Answers0