SwiftUI: Teks tidak memiliki lebar layar penuh setelah rotasi

Dec 01 2020

Aplikasi ini hanya mendukung mode potret. Dua pertanyaan harus ditampilkan, tetapi dirotasi sesuai. Jadi para pemain bisa melihat pertanyaan dengan baik, di mana pun mereka duduk.

Bagaimanapun, tampaknya kotak pembatas tidak diputar saat berputar.

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

Saya telah mencoba banyak hal berbeda. Saya meninggalkan GeometryReaderdan bekerja dengan 'fixedSize () `. Lalu saya mendapatkan satu baris yang melintasi layar.

Saya juga telah mencoba solusi ini , tetapi tidak berfungsi seperti yang diharapkan.

Hasil saya selalu berupa teks yang tidak menggunakan lebar penuh. (Tumpang tindih hanyalah kesalahan lain, tapi saya pasti akan mengendalikannya).

Apa yang sebenarnya ingin saya miliki:

Jawaban

2 Asperi Dec 01 2020 at 23:33

Berikut adalah demo pendekatan yang mungkin. Disiapkan dengan 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)
            }
        )
    }
}