SwiftUI Text布局疑问：侧边文本换行与边距问题求助

问题1：避免左侧旋转文本换行 #

旋转文本出现换行，是因为SwiftUI默认会压缩文本适配旋转后的容器空间。直接给旋转后的文本添加fixedSize()，强制文本保持原始的一行显示尺寸，就能解决换行问题：

Text("AA BB CC DD EE FF GG HH")
    .rotationEffect(.degrees(-90), anchor: .center)
    .fixedSize()

问题2：统一左右文本边距 #

左右边距不一致，是因为旋转后文本的布局原点和默认边距计算逻辑有差异。给左右两侧的旋转文本添加相同的水平padding，再配合HStack的空间分配，就能让两边边距完全对称：

HStack {
    Text("AA BB CC DD EE FF GG HH")
        .rotationEffect(.degrees(-90), anchor: .center)
        .fixedSize()
        .padding(.horizontal, 16) // 统一设置水平边距
    Spacer()
    Text("AA BB CC DD EE FF GG HH")
        .rotationEffect(.degrees(90), anchor: .center)
        .fixedSize()
        .padding(.horizontal, 16) // 与左侧保持一致
}

完整修正代码 #

整合以上调整，同时优化整体垂直布局的间距，确保四边文本均匀分布：

var body: some View {
    VStack {
        Spacer()
        Text("AA BB CC DD EE FF GG HH")
        Spacer()
        HStack {
            Text("AA BB CC DD EE FF GG HH")
                .rotationEffect(.degrees(-90), anchor: .center)
                .fixedSize()
                .padding(.horizontal, 16)
            Spacer()
            Text("AA BB CC DD EE FF GG HH")
                .rotationEffect(.degrees(90), anchor: .center)
                .fixedSize()
                .padding(.horizontal, 16)
        }
        .frame(height: 200)
        Spacer()
        Text("AA BB CC DD EE FF GG HH")
        Spacer()
    }
}

补充说明 #

• fixedSize()：让文本忽略容器尺寸限制，保持自身的理想显示尺寸，彻底解决换行问题。
• 统一的padding(.horizontal)：确保左右旋转文本到屏幕边缘的距离完全一致。
• 锚点设为.center：让文本围绕中心旋转，避免旋转后出现不必要的位置偏移。

内容的提问来源于stack exchange，提问作者Reinhard Männer