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

Метод 1: использование модификатора blur

Самый простой способ размыть фон в SwiftUI — использовать встроенный модификатор blur. Этот модификатор принимает UIBlurEffect.Styleв качестве параметра. Вот пример:

struct ContentView: View {
    var body: some View {
        ZStack {
            Image("backgroundImage")
                .resizable()
                .scaledToFill()
                .blur(radius: 8) // Apply blur effect
                .edgesIgnoringSafeArea(.all)

            // Add foreground content here
        }
    }
}

Метод 2: наложение размытого изображения

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

struct ContentView: View {
    var body: some View {
        ZStack {
            Image("backgroundImage")
                .resizable()
                .scaledToFill()
                .edgesIgnoringSafeArea(.all)

            BlurView(style: .regular) // Custom view with blur effect

            // Add foreground content here
        }
    }
}
struct BlurView: UIViewRepresentable {
    var style: UIBlurEffect.Style

    func makeUIView(context: Context) -> UIVisualEffectView {
        let blurEffect = UIBlurEffect(style: style)
        let blurView = UIVisualEffectView(effect: blurEffect)
        return blurView
    }

    func updateUIView(_ uiView: UIVisualEffectView, context: Context) {
        uiView.effect = UIBlurEffect(style: style)
    }
}

Метод 3. Использование собственного модификатора фона

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

Content) ->some View {
content
.background(
BlurView(style: style)
.edgesIgnoringSafeArea(.all)
)

}
расширение View {
func BlurBackground(style: UIBlurEffect.Style) ->some View {
self.modifier(BlurBackground(style: style))


// Использование:
struct ContentView: View {
var body: some View {
ZStack {
Image(“backgroundImage”)
.resizable()
.scaledToFill()
.blurBackground(стиль:.systemUltraThinMaterial)

// Добавляем сюда содержимое переднего плана

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