在SwiftUI HStack中对齐旋转文本

时间:2020-02-27 13:51:22

标签: ios alignment swiftui text-alignment

我正在尝试使旋转文本尾部对齐(旋转后顶部对齐?)。我尝试了step1: conda create -n mylgapp2 python=3.6 step2: conda activate mylgapp2 step3: conda install -c conda-forge spacy step4: python -m spacy download en_core_web_sm --> it gives error step5: conda install -c anaconda flask step6: write code: import spacy nlp = spacy.load("en_core_web_sm") doc = nlp("Apple is looking at buying U.K. startup for $1 billion") for token in doc: print(token.text) step 7: conda run app.py ,每个Text的HStack alignment parameteralignmentGuide() ViewModifier的不同组合,但无法达到预期的效果。 我确实避免使用custom VerticalAlignmentGuide,因为文本的比例因子可能会根据“文本视图”的数量而变化。

需要的对齐方式用红线显示:

image with alignment description

基本代码:

.frame() ViewModifier

3 个答案:

答案 0 :(得分:3)

enter image description here尝试以下操作:

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

            Text("Text 2")

            Text("Text 34")

        }.rotationEffect(.degrees(-90))

答案 1 :(得分: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))
            }
        }
    }
}

enter image description here

答案 2 :(得分:1)

您的评论更新的新答案:

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

enter image description here