Выравнивание изменяется после добавления GeometryReader

Question

У меня был макет, который по сути выглядел следующим образом:

ZStack(alignment: .bottom) {
    GeometryReader { geometry in
        ZStack {
            Text("Centered")
        }
        .frame(width: geometry.size.width, height: geometry.size.height, alignment: .center)
        .background(Color.red)
    }
    Group {
        GeometryReader { geometry in // This GeometryReader is causing issues.
            VStack {
                Text("I want this at the bottom")
            }
            .frame(width: geometry.size.width, height: nil, alignment: .topLeading)
        }
    }
}

При рендеринге оба текстовых элемента отображаются в центре экрана. Контейнер второго текстового элемента занимает всю ширину экрана, которая предназначена. Если я удаляю проблематично c GeometryReader, то текст правильно отображается в нижней части экрана, но, очевидно, рамка не установлена ​​на всю ширину экрана. Почему это происходит?

Answer 1

Вы можете получить это только с одним ZStack и VStack

ZStack {
    Color(.red)
    VStack(spacing: 10) {
        Spacer()
        Text("Centered")
        Spacer()
        Text("I want this at the bottom")
    }
}

Answer 2

По умолчанию контейнеры SwiftUI ограничены содержимым, но GeometryReader занимает максимум доступного пространства. Так что, если удалить второй GeometryReader, VStack просто обернет внутренний Text.

Если все еще необходимо сохранить второй GeometryReader (для чтения width) и поместить текст внизу, самый простой подход - добавить Spacer, как показано ниже

Group {
    GeometryReader { geometry in
        VStack {
            Spacer()
            Text("I want this at the bottom")
        }
        .frame(width: geometry.size.width, height: nil, alignment: .topLeading)
    }
}

Альтернативный подход к тому, как придерживаться вида снизу, вы можете найти в моем ответе в этом посте Положение вида снизу без использования проставки