SwiftUI: Text hat nach dem Drehen nicht die volle Bildschirmbreite

Dec 01 2020

Die App unterstützt nur den Potrait-Modus. Es sollten zwei Fragen angezeigt werden, die jedoch entsprechend gedreht werden. So können die Spieler die Fragen gut sehen, egal wo sie sitzen.

Wie auch immer, es scheint, dass der Begrenzungsrahmen beim Drehen nicht gedreht wird.

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

Ich habe viele verschiedene Dinge ausprobiert. Ich habe das GeometryReaderweggelassen und mit 'fixedSize ()' gearbeitet. Dann bekomme ich einen Einzeiler, der über den Bildschirm geht.

Ich habe diese Lösung auch ausprobiert , aber sie funktioniert nicht wie erwartet.

Mein Ergebnis ist immer ein Text, der nicht die volle Breite verwendet. (Die Überlappung ist nur ein weiterer Fehler, aber ich werde das definitiv unter Kontrolle bringen).

Was ich eigentlich haben möchte:

Antworten

2 Asperi Dec 01 2020 at 23:33

Hier ist eine Demo des möglichen Ansatzes. Vorbereitet mit 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)
            }
        )
    }
}