SwiftUI: le texte n'a pas la pleine largeur de l'écran après la rotation

Dec 01 2020

L'application ne prend en charge que le mode Potrait. Deux questions doivent être affichées, mais elles sont tournées en conséquence. Ainsi, les joueurs peuvent bien voir les questions, peu importe où ils se trouvent.

Quoi qu'il en soit, il semble que la boîte englobante ne pivote pas pendant la rotation.

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

J'ai essayé beaucoup de choses différentes. J'ai laissé de côté GeometryReaderet j'ai travaillé avec 'fixedSize () `. Ensuite, j'obtiens un one-liner qui traverse l'écran.

J'ai également essayé cette solution , mais elle ne fonctionne pas comme prévu.

Mon résultat est toujours un texte qui n'utilise pas la pleine largeur. (Le chevauchement est juste une autre erreur, mais je vais certainement le maîtriser).

Ce que je veux vraiment avoir:

Réponses

2 Asperi Dec 01 2020 at 23:33

Voici une démonstration d'approche possible. Préparé avec 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)
            }
        )
    }
}