SwiftUI : 회전 후 텍스트가 화면의 전체 너비가 아닙니다.

Dec 01 2020

앱은 potrait 모드 만 지원합니다. 두 개의 질문이 표시되어야하지만 그에 따라 회전됩니다. 따라서 플레이어는 어디에 앉아 있든 질문을 잘 볼 수 있습니다.

어쨌든 회전하는 동안 경계 상자가 회전하지 않는 것 같습니다.

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 ()'로 작업했습니다. 그런 다음 화면을 가로 지르는 한 줄의 줄을 얻습니다.

이 솔루션 도 시도했지만 예상대로 작동하지 않습니다.

내 결과는 항상 전체 너비를 사용하지 않는 텍스트입니다. (겹치는 것은 또 다른 실수이지만 확실히 통제 할 것입니다).

내가 실제로 갖고 싶은 것 :

답변

2 Asperi Dec 01 2020 at 23:33

다음은 가능한 접근 방식의 데모입니다. 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)
            }
        )
    }
}