SwiftUI中VStack内多行文本对齐异常问题求助

核心实现方案 #

通过调整HStack垂直对齐规则、限制左侧文本行数并设置布局优先级，可稳定左右文本的布局效果：

struct AlignedTextRow: View {
    let leftText: String
    let rightText: String
    
    var body: some View {
        HStack(alignment: .top, spacing: 16) { // 强制顶部对齐，避免布局偏移
            Text(leftText)
                .lineLimit(5) // 最多显示5行
                .truncationMode(.tail) // 超出部分尾部截断
                .layoutPriority(1) // 让左侧优先占据可用空间，防止被右侧挤压
                .frame(maxWidth: .infinity, alignment: .leading) // 左侧文本左对齐，占满剩余宽度
            
            Text(rightText)
                .frame(alignment: .trailing) // 右侧文本右对齐，自适应高度
        }
        .padding()
    }
}

// 使用示例
struct ContentView: View {
    var body: some View {
        VStack(spacing: 20) {
            AlignedTextRow(
                leftText: "短文本示例",
                rightText: "右侧内容"
            )
            AlignedTextRow(
                leftText: "这是一段超长测试文本，用来模拟左侧文本占据多行的场景，超出5行的内容会被自动截断。这是一段超长测试文本，用来模拟左侧文本占据多行的场景，超出5行的内容会被自动截断。",
                rightText: "右侧内容"
            )
        }
    }
}

关键细节说明 #

• HStack(alignment: .top)：固定左右文本垂直顶部对齐，彻底解决左侧多行时右侧文本偏移的问题
• lineLimit(5) + truncationMode(.tail)：严格控制左侧文本行数，超出部分自动截断
• layoutPriority(1)：让左侧文本优先分配可用空间，避免右侧文本挤压左侧布局
• 若需要左侧文本宽度固定（比如占屏幕70%），可将左侧frame修改为：

  .frame(width: UIScreen.main.bounds.width * 0.7, alignment: .leading)
  

调整后，无论左侧文本长短，布局都能保持稳定，右侧文本始终紧贴顶部，上下无多余间隙。

内容的提问来源于stack exchange，提问作者EN_Tech