Как заставить VStack занимать всю ширину экрана в SwiftUI

Почему VStack не растягивается автоматически?

В SwiftUI контейнеры (VStack, HStack, ZStack) по умолчанию подстраиваются под размер своего содержимого. Это называется intrinsic content size (внутренний размер). Когда ты добавляешь .frame(maxWidth: .infinity), ты говоришь системе: "разреши этому VStack быть шириной до бесконечности", но сам VStack всё равно использует минимально возможную ширину, так как его содержимое (текст) не требует больше.

Решение — использовать модификатор .frame(maxWidth: .infinity) вместе с выравниванием или применять его к родительскому контейнеру. Вот правильный способ:

struct ContentView: View {
    var body: some View {
        VStack {
            Text("Привет, мир!")
                .font(.largeTitle)
            Text("Это текст внутри VStack")
                .font(.body)
        }
        .frame(maxWidth: .infinity) // Растягиваем VStack
        .background(Color.blue)
    }
}

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

Модификатор .frame(maxWidth: .infinity) сообщает SwiftUI, что VStack может занимать всю доступную ширину. Когда ты добавляешь его до .background, фон рисуется уже на растянутом VStack. Важно помнить порядок модификаторов — каждый из них применяется к результату предыдущего.

Дополнительные настройки

• Выравнивание содержимого: По умолчанию текст будет прижат к левому краю. Чтобы центрировать его, добавь .multilineTextAlignment(.center) или используй HStack с Spacer().
• Отступы: Добавь .padding() после .frame, чтобы текст не прилипал к краям.
• Минимальная высота: Если нужно растянуть и по высоте, используй .frame(maxWidth: .infinity, maxHeight: .infinity).

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

Если тебе нужно получить точную ширину экрана для расчётов, используй GeometryReader:

struct ContentView: View {
    var body: some View {
        GeometryReader { geometry in
            VStack {
                Text("Ширина: \(geometry.size.width)")
                    .font(.largeTitle)
                Text("Высота: \(geometry.size.height)")
            }
            .frame(width: geometry.size.width, height: geometry.size.height)
            .background(Color.blue)
        }
    }
}

Почему твой первый вариант не сработал?

Ты, вероятно, писал .frame(maxWidth: .infinity) на дочерних элементах (например, на Text), а не на самом VStack. Или добавлял модификатор после .background, что не давало эффекта, так как фон уже был нарисован до растягивания.

// Неправильно: модификатор на тексте
VStack {
    Text("Привет")
        .frame(maxWidth: .infinity) // Это растянет только текст, а не VStack
    Text("Мир")
}
.background(Color.blue)

// Неправильно: порядок модификаторов
VStack {
    Text("Привет")
    Text("Мир")
}
.background(Color.blue) // Сначала рисуется фон (узкий)
.frame(maxWidth: .infinity) // Потом растягивается, но фон не перерисовывается

Заключение

Главное правило: модификатор .frame применяй к контейнеру, который хочешь растянуть, и до того, как применишь визуальные модификаторы (background, padding и т.д.). SwiftUI — это декларативный фреймворк, где порядок имеет значение!

struct ContentView: View {
    var body: some View {
        HStack {
            Spacer()
            VStack {
                Text("Привет, мир!")
                Text("Это текст внутри VStack")
            }
            .background(Color.blue)
            Spacer()
        }
    }
}