Как изменить цвет фона у SwiftUI View? (Background Color)

Правильный способ изменения фона в SwiftUI

Проблема, с которой вы столкнулись, типична для новичков. В SwiftUI модификатор .background() применяется к содержимому View, а не к самому экрану. Чтобы залить фоном весь экран, включая Safe Area, нужно использовать комбинацию ZStack и .edgesIgnoringSafeArea().

Основное решение

Самый надёжный способ — разместить цветной слой в ZStack позади основного контента:

struct ContentView: View {
    var body: some View {
        ZStack {
            // Фоновый слой на весь экран
            Color.red
                .edgesIgnoringSafeArea(.all)
            
            // Основной контент
            VStack(spacing: 20) {
                Text("Привет, мир!")
                    .font(.largeTitle)
                    .foregroundColor(.white)
                Text("Этот текст на красном фоне")
                    .foregroundColor(.white)
            }
        }
    }
}

Почему это работает?

• ZStack — накладывает слои друг на друга. Первый элемент (фон) будет позади остальных.
• Color.red — это самостоятельное View, которое занимает всё доступное пространство.
• .edgesIgnoringSafeArea(.all) — заставляет фон выходить за пределы Safe Area (статус-бар, нижняя панель на iPhone X+).

Вариант с NavigationView

Если вы используете NavigationView, фон нужно применить внутри него, а не снаружи:

struct ContentView: View {
    var body: some View {
        NavigationView {
            ZStack {
                Color.blue
                    .edgesIgnoringSafeArea(.all)
                
                VStack {
                    Text("Контент")
                        .foregroundColor(.white)
                    NavigationLink(destination: Text("Детали")) {
                        Text("Перейти")
                            .padding()
                            .background(Color.white)
                            .cornerRadius(10)
                    }
                }
            }
            .navigationTitle("Главная")
        }
    }
}

Альтернативный подход с модификатором

Можно создать собственный модификатор для переиспользования:

struct BackgroundModifier: ViewModifier {
    let color: Color
    
    func body(content: Content) -> some View {
        ZStack {
            color.edgesIgnoringSafeArea(.all)
            content
        }
    }
}

extension View {
    func fullScreenBackground(_ color: Color) -> some View {
        modifier(BackgroundModifier(color: color))
    }
}

// Использование
struct ContentView: View {
    var body: some View {
        Text("Фон через модификатор")
            .foregroundColor(.white)
            .fullScreenBackground(.green)
    }
}

Важные замечания

• Не используйте .background() для заливки всего экрана — он работает только в пределах контента.
• .edgesIgnoringSafeArea() применяйте только к фоновому слою, не ко всему контенту, иначе элементы могут "залезть" под статус-бар.
• Для градиентов используйте LinearGradient вместо Color:

ZStack {
    LinearGradient(
        gradient: Gradient(colors: [.purple, .blue]),
        startPoint: .top,
        endPoint: .bottom
    )
    .edgesIgnoringSafeArea(.all)
    // контент
}

Этот подход работает во всех версиях SwiftUI и считается best practice. Надеюсь, теперь всё стало понятно!

struct ContentView: View {
    var body: some View {
        GeometryReader { geometry in
            ZStack {
                Color.yellow
                    .frame(width: geometry.size.width,
                           height: geometry.size.height)
                    .edgesIgnoringSafeArea(.all)
                
                VStack {
                    Text("Динамический фон")
                        .font(.title)
                }
                .frame(width: geometry.size.width,
                       height: geometry.size.height)
            }
        }
    }
}