SwiftUI: tekst nie ma pełnej szerokości ekranu po obróceniu

Question

Aplikacja obsługuje tylko tryb potrait. Powinny zostać wyświetlone dwa pytania, ale są one odpowiednio obrócone. Dzięki temu gracze dobrze widzą pytania, bez względu na to, gdzie siedzą.

W każdym razie wydaje się, że obwiednia nie jest obracana podczas obracania.

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)
            }
        }
    }

Próbowałem wielu różnych rzeczy. I pominął GeometryReaderi pracował z „fixedSize ()`. Następnie dostaję jednolinijkowy tekst, który przechodzi przez ekran.

Próbowałem też tego rozwiązania , ale nie działa zgodnie z oczekiwaniami.

Mój wynik to zawsze tekst, który nie zajmuje pełnej szerokości. (Nakładanie się to tylko kolejny błąd, ale na pewno uda mi się to opanować).

Co tak naprawdę chcę mieć:

Answer 1

Oto demo możliwego podejścia. Przygotowano z 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)
            }
        )
    }
}