不懂SwiftUI文本布局

Question

我想在视图的所有 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()
    }
}

这是输出：

问题：

• 为什么文本左换行，但相同的文本却没有右换行？我怎样才能避免包裹？
• 为什么文本左边距与右边文本不同？我怎样才能使它们相等？

Answer 1

我认为问题的一部分是你没有强迫两者都居中，而且其中一个也被绘制，其布局优先级高于另一个。因此，如果将它们的框架宽度设置为最大值，则每个框架将占据 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)

在这个示例中，我可以获得各种动态类型的预期输出，如下所示。

Answer 2

xTwisteDx 的回答很棒（+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()