Выровнять повернутые тексты в SwiftUI HStack

Question

Я пытаюсь выполнить выравнивание повернутых текстов (выравнивание по вертикали после поворота?) Я пробовал разные комбинации HStack alignment parameter, каждый текст alignmentGuide() ViewModifier и custom VerticalAlignmentGuide, но не смог достичь желаемого результата. Я воздерживался от использования .frame() ViewModifier, поскольку масштабный коэффициент текста может изменяться в зависимости от количества представлений текста.

Необходимое выравнивание, отображаемое красной линией:

Базовый код:

HStack {
    VStack {
        Spacer()
        Rectangle()
            .fill(Color.green)
            .frame(height: 80)
        Text("Text 1")
            .rotationEffect(.degrees(-90))
            .padding(.top, 30)
    }
    VStack {
        Spacer()
        Rectangle()
            .fill(Color.green)
            .frame(height: 80)
        Text("Text 2")
            .rotationEffect(.degrees(-90))
            .padding(.top, 30)
    }
    VStack {
        Spacer()
        Rectangle()
            .fill(Color.green)
            .frame(height: 80)
        Text("Text 34")
            .rotationEffect(.degrees(-90))
            .padding(.top, 30)
    }
}

Answer 1

попробуйте это:

VStack(alignment: .trailing) {
            Text("Text 1")

            Text("Text 2")

            Text("Text 34")

        }.rotationEffect(.degrees(-90))

Answer 2

хорошо, мой последний сейчас, надеюсь, вы удовлетворены;)

struct ContentView: View {
    var body: some View {
        HStack {
            VStack(alignment: .center) {
                Rectangle()
                    .fill(Color.green)
                    .frame(height: 80)
                Text("Text 1")
                    .frame(width:100, height:100, alignment: .trailing)
                    .rotationEffect(.degrees(-90))
            }
            VStack(alignment: .center) {
                Rectangle()
                    .fill(Color.green)
                    .frame(height: 80)
                Text("Text 2")
                    .frame(width:100, height:100, alignment: .trailing)
                    .rotationEffect(.degrees(-90))
            }
            VStack(alignment: .center) {
                Rectangle()
                    .fill(Color.green)
                    .frame(height: 80)
                Text("Text 345")
                    .frame(width:100, height:100, alignment: .trailing)
                    .rotationEffect(.degrees(-90))
            }
        }
    }
}

Answer 3

новый ответ на ваш комментарий обновление:

HStack {
            VStack {
                Rectangle()
                    .fill(Color.green)
                    .frame(height: 80)
                Text("Text 1")
                    .rotationEffect(.degrees(-90), anchor: .bottomTrailing)
                    .padding(.top, 30)
            }
            VStack {
                Rectangle()
                    .fill(Color.green)
                    .frame(height: 80)
                Text("Text 2")
                    .rotationEffect(.degrees(-90), anchor: .bottomTrailing)
                    .padding(.top, 30)
            }
            VStack {
                Rectangle()
                    .fill(Color.green)
                    .frame(height: 80)
                Text("Text 34")
                    .rotationEffect(.degrees(-90), anchor: .bottomTrailing)
                    .padding(.top, 30)
            }
        }
    }