Разработка

Карточка с частичным размытием в SwiftUI

В последнее время я часто вижу, как дизайнеры создают карточки товаров, в которых часть карточки, чаще всего нижняя, размыта, чтобы текст и описание было легче читать.

Опубликовано

4 месяца назад

07.08.2025

Автор:

AppTractor

Как в этом твите:

На этот раз я попытаюсь создать такой пользовательский интерфейс.

В SwiftUI есть способ справиться с размытием, используя такой эффект.

.blur(radius: 8) // blur effect

Обычно это используется для изображений или подобного контента.

В этом примере я хочу создать компонент размытия за областью представления.

Здесь я использую изображение в качестве образца, но его также можно применять к таблицам и другим элементам.

Для начала создадим карточку с фоновым изображением.

Затем добавим поверх неё размытие, которое размоет всё изображение.

import SwiftUI

struct BlurredCard: View {
    let imageName: String

    var body: some View {
        ZStack {
            // Background Image
            Image(imageName)
                .resizable()
                .aspectRatio(contentMode: .fill)
                .clipped()
                .blur(radius: 8) // blur effect
                .cornerRadius(20)
        }
    }
}

Затем добавим название, описание и кнопку «Добавить в корзину».

truct BlurredCard: View {
    let imageName: String
    let title: String
    let description: String
    let price: String

    var body: some View {
        ZStack {
            // Background Image
            Image(imageName)
                .resizable()
                .aspectRatio(contentMode: .fill)
                .clipped()
                .blur(radius: 8)
                .cornerRadius(20)

             VStack(alignment: .leading, spacing: 16) {
                Spacer()

                HStack {
                    // Title
                    Text(title)
                        .font(.title2)
                        .fontWeight(.bold)
                        .foregroundColor(.white)
                        .multilineTextAlignment(.leading)

                    Spacer()

                    Text(price)
                        .font(.system(size: 14))
                        .fontWeight(.bold)
                        .foregroundColor(.white)
                        .multilineTextAlignment(.leading)
                }

                // Description
                Text(description)
                    .font(.body)
                    .foregroundColor(.white.opacity(0.9))
                    .multilineTextAlignment(.leading)
                    .lineLimit(3)

                // Buy Button
                Button(action: {
                    // Handle buy action
                    print("Buy button tapped for \(title)")
                }) {
                    Text("Add to Cart")
                        .font(.system(size: 16, weight: .semibold))
                        .foregroundColor(.black)
                        .frame(maxWidth: .infinity)
                        .padding(.vertical, 16)
                        .background(Color.white)
                        .cornerRadius(24)
                        .padding(EdgeInsets(top: 0, leading: 16, bottom: 12, trailing: 16))
                }
                .buttonStyle(PlainButtonStyle())
            }
            .padding()
        }
    }
}

Итак, как нам сделать карту частично размытой?

Этого можно добиться, дублировав изображение и применив размытие только к дубликату, высота которого составляет половину высоты карточки.

Код будет выглядеть примерно так:

import SwiftUI

struct BlurredCard: View {
    let imageName: String
    let title: String
    let description: String
    let price: String

    var body: some View {
        ZStack {
            // Background Image
            Image(imageName)
                .resizable()
                .aspectRatio(contentMode: .fill)
                .clipped()

            VStack {
                Spacer()

                Image(imageName)
                    .resizable()
                    .frame(height: 200)
                    .clipped()
                    .blur(radius: 12) // blur effect
            }
            .cornerRadius(20)

            VStack(alignment: .leading, spacing: 16) {
                Spacer()

                HStack {
                    // Title
                    Text(title)
                        .font(.title2)
                        .fontWeight(.bold)
                        .foregroundColor(.white)
                        .multilineTextAlignment(.leading)

                    Spacer()

                    Text(price)
                        .font(.system(size: 14))
                        .fontWeight(.bold)
                        .foregroundColor(.white)
                        .multilineTextAlignment(.leading)
                }

                // Description
                Text(description)
                    .font(.body)
                    .foregroundColor(.white.opacity(0.9))
                    .multilineTextAlignment(.leading)
                    .lineLimit(3)

                // Buy Button
                Button(action: {
                    // Handle buy action
                    print("Buy button tapped for \(title)")
                }) {
                    Text("Add to Cart")
                        .font(.system(size: 16, weight: .semibold))
                        .foregroundColor(.black)
                        .frame(maxWidth: .infinity)
                        .padding(.vertical, 16)
                        .background(Color.white)
                        .cornerRadius(24)
                        .padding(EdgeInsets(top: 0, leading: 16, bottom: 12, trailing: 16))
                }
                .buttonStyle(PlainButtonStyle())
            }
            .padding()
        }
    }
}

Вот пример того, как может выглядеть предварительный просмотр карточки, представленной выше:

struct TestBlurView: View {
    
 var body: some View {
        ScrollView {
            VStack {
                BlurredCard(
                    imageName: "alphonso_mango",
                    title: "Alphonso",
                    description: "Loved worldwide for their sweetness our Alphonso mangoes are a delicious delight wherever you are",
                    price: "$120"
                )
                .cornerRadius(64)
                .frame(height: 300)
                .padding(.top, 150)
                .padding(.horizontal, 24)
            }
        }
    }
}


#Preview {
    TestBlurView()
}

Некоторые приложения используют этот эффект размытия, чтобы скрыть свои премиум-функции.

Если в вашем приложении есть премиум-функции, которые вы хотите частично скрыть, вы можете использовать этот метод размытия.

Спасибо за прочтение!

Источник

Галстян Ваган, iOS-разработчик, заметил небольшое несоответствие: результат работы кода и изображение из твита в начале статьи отличаются. В текущем варианте картинка как бы «начинается заново», вместо плавного перехода — первая часть изображения обрезается. Для получения задуманного эффекта можно использовать немного другой код. Правда, даже этот вариант не полностью совпадает со скриншотом в твите — там используется градиент с увеличивающимся блюром.

struct ProductCardBlured: View {
    let image: ImageResource
    let name: String
    let price: String
    let description: String
    

    var body: some View {
        VStack {
            Image(image)
                .resizable()
                .aspectRatio(contentMode: .fit)
                .overlay(alignment: .bottom) {
                    VStack {
                        Image(image)
                            .resizable()
                            .aspectRatio(contentMode: .fill)
                            .frame(height: 100, alignment: .bottom)
                            .blur(radius: 4)
                            .clipped()
                    }
                }
        }
        .overlay {
            cardInfo()
        }
        .cornerRadius(20)
        .frame(width: 400)
        .padding(.horizontal, 12)
        

    }
}


private extension ProductCardBlured {
    func buuton() -> some View {
        Button(action: {
            print("Buy button tapped")
        }) {
            Text("Add to Cart")
                .font(.system(size: 16, weight: .semibold))
                .foregroundColor(.black)
                .frame(maxWidth: .infinity)
                .padding(.vertical, 16)
                .background(Color.white)
                .cornerRadius(24)
                .padding(EdgeInsets(top: 0, leading: 16, bottom: 12, trailing: 16))
        }
        .buttonStyle(PlainButtonStyle())
    }
    

    func cardInfo() -> some View {
        VStack(alignment: .leading) {
            

            Spacer()
            

            HStack {
                Text(name)
                    .font(.title2)
                    .fontWeight(.bold)
                    .foregroundStyle(.white)
                    .frame(alignment: .leading)
                

                Spacer()
                

                Text(price)
                    .font(.title2)
                    .fontWeight(.bold)
                    .foregroundStyle(.white)
                    .frame(alignment: .leading)
            }
            .padding(.bottom, 12)
            

            Text(description)
                .font(.body)
                .foregroundStyle(.white)
                .frame(alignment: .leading)
            

            buuton()
        }
        .padding(.horizontal, 16)
        .padding(.bottom, 12)
    }
}

Если вы нашли опечатку - выделите ее и нажмите Ctrl + Enter! Для связи с нами вы можете использовать info@apptractor.ru.