SwiftUI: Как центрировать вид по вертикали и горизонтали внутри вида контейнера и поместить что-то под него

Question

Я искал stackoverflow, но, к сожалению, не нашел решения для этого конкретного случая.

Я пытаюсь отобразить следующий сценарий:

• представление контейнера
• текст, который центрируется по горизонтали и вертикали в этом виде контейнера
• текст, который находится ниже этого центрированного текста

Что бы я ни пытался, я не могу центрировать этот текст по горизонтали и вертикали в представление контейнера и поместите что-то под ним, не высовывая его из центра представления контейнера.

Для лучшего понимания я изобразил это поведение в раскадровке:

Было бы здорово, если бы кто-нибудь помог мне написать этот сценарий в SwiftUI! :)

Answer 1

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

struct DemoCenteredText: View {
    var body: some View {
        GeometryReader { gp in
            ZStack {
                Text("Primary Text").font(.title)
                    .alignmentGuide(VerticalAlignment.center, computeValue: { $0[.bottom] })
                    .position(x: gp.size.width / 2, y: gp.size.height / 2)
                Text("Secondary Text")
                    .alignmentGuide(VerticalAlignment.center, computeValue: { $0[.top] - 16 })
            }
        }
    }
}

Приведенное выше .position фиксирует основной заголовок в центре родительского контейнера, свободное пространство которого используется GeometryReader, а alignmentGuide заставляет макет размещать вторичный текст по смещению 16 от нижней части основной текст (фактически так же, как ограничение в вашем вопросе).

Answer 2

попробуйте это:

struct ContentView: View {
    var body: some View {
        VStack {
            Text("Hello, World! Centereed")
                .overlay(Text("john").offset(y: 30))
        }
    }
}