SwiftUI: текст не занимает всю ширину экрана после поворота

Question

Приложение поддерживает только портретный режим. Должны отображаться два вопроса, но они соответственно меняются местами. Таким образом, игроки могут хорошо видеть вопросы, где бы они ни сидели.

В любом случае кажется, что ограничивающая рамка не поворачивается при вращении.

ZStack {
        HStack {
            GeometryReader { proxy in
                Text(challenge)
                    .rotationEffect(Angle(degrees: 90), anchor: .center)
                    .frame(maxWidth: proxy.size.height, minHeight: proxy.size.width)
                    .foregroundColor(.red)
                    .font(.largeTitle)
                    .background(Color.blue)
            }
            Spacer()
            GeometryReader { proxy in
                Text(challenge)
                    .rotationEffect(Angle(degrees: 270), anchor: .center)
                    .frame(maxWidth: proxy.size.height, minHeight: proxy.size.width)
                    .foregroundColor(.red)
                    .font(.largeTitle)
                    .background(Color.blue)
            }
        }
    }

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

Я тоже пробовал это решение , но оно не работает должным образом.

Мой результат - всегда текст, который не использует всю ширину. (Перекрытие - еще одна ошибка, но я обязательно возьму это под контроль).

Что я на самом деле хочу иметь:

Answer 1

Вот демонстрация возможного подхода. Подготовлено с Xcode 12.1 / iOS 14.1

struct DemoView: View {
    var body: some View {
        HStack {
            RotatedText(text: lorem, angle: Angle(degrees: 90))
            RotatedText(text: lorem, angle: Angle(degrees: -90))
        }
    }
}

struct RotatedText: View {
    let text: String
    let angle: Angle
    var color: Color = .blue
    
    var body: some View {
        color.overlay(
            GeometryReader { gp in
                VStack {
                    Text(text)
                        .frame(width: gp.size.height, height: gp.size.width)
                        .rotationEffect(angle)
                }.frame(width: gp.size.width, height: gp.size.height)
            }
        )
    }
}