代码之家 › 专栏 › 技术社区 › Reinhard Männer

不理解SwiftUI文本布局

word-wrap rendering swiftui

Reinhard Männer · 技术社区 · 2 年前

我想在视图的所有4个方面输出一些文本。这是我的代码:

   var body: some View {
        Spacer()
        Text("AA BB CC DD EE FF GG HH")
        Spacer()
        HStack {
            Text("AA BB CC DD EE FF GG HH").rotationEffect(Angle(degrees: -90))
            Spacer()
            Text("AA BB CC DD EE FF GG HH").rotationEffect(Angle(degrees: 90))
        }.frame(height: 200)
        Spacer()
        Text("AA BB CC DD EE FF GG HH")
        Spacer()
    }
}

这是输出:

问题:

为什么文本是左换行的,而相同的文本不是右换行的?我该如何避免包装?
为什么文本左边的边距与右边的边距不同?我怎样才能让他们平等?

2 回复 | 直到 2 年前

xTwisteDx 2 年前

我认为问题的一部分是,你没有强迫两个都居中,而且一个被画出来,在布局中优先于另一个。因此,如果将它们的框架宽度设置为最大值,则每个框架将占据视图的1/2。请注意,rotationEffect实际上并没有调整 frame 旋转

让你的框架不断匹配是解决这个问题的唯一“正确”方法,或者使用其他格式化技巧,例如 .minimumFontScale(..) 甚至 .lineLimit(..) 。

实例

    VStack {
        Spacer()
        Text("AA BB CC DD EE FF GG HH")
            .frame(maxWidth: .infinity)
        Spacer()
        HStack {
            Text("AA BB CC DD EE FF GG HH").rotationEffect(Angle(degrees: -90))
                .frame(maxWidth: .infinity)
            Spacer()
            Text("AA BB CC DD EE FF GG HH").rotationEffect(Angle(degrees: 90))
                .frame(maxWidth: .infinity)
        }.frame(height: 200)
        Spacer()
        Text("AA BB CC DD EE FF GG HH")
            .frame(maxWidth: .infinity)
        Spacer()
    }
    .multilineTextAlignment(.center)

在这个例子中,我可以得到各种动态类型的预期输出。

Reinhard Männer 2 年前

xTwisteDx's answer 很棒(+1,已接受)。我对它做了一些修改,以避免对旋转文本进行文本换行。

它们被包装了,因为文本旋转发生在文本布局之后。当旋转修改器被注释掉时,可以看到这一点。然后,两个文本根本不适合放在一行。

为了得到展开的旋转文本,我把它们放在 ZStack ,一个文本向左调整,另一个向右调整,使用 Spacers 。这样,两个未旋转的文本都可以使用整个屏幕宽度,并且不会被包裹。

旋转后,一切看起来都很好。
这是代码:

Spacer()
Text("AA BB CC DD EE FF GG HH")
    .frame(maxWidth: .infinity)
Spacer()
ZStack {
    HStack(alignment: .center) {
        Text("AA BB CC DD EE FF GG HH")
            .rotationEffect(Angle(degrees: -90))
        Spacer()
    }
    HStack(alignment: .center) {
        Spacer()
    Text("AA BB CC DD EE FF GG HH")
        .rotationEffect(Angle(degrees: 90))
    }
}.frame(height: 200)
Spacer()
Text("AA BB CC DD EE FF GG HH")
    .frame(maxWidth: .infinity)
Spacer()