SwiftUI多行文本致Stack右侧对齐异常问题修复求助

问题描述 #

左侧文本为单行时，左右布局显示正常；但当左侧fistValue是3-4行的多行内容时，右侧的「2nd Title」与「2nd Value」之间会出现间隙，破坏了原本的紧凑对齐效果。需要实现：左侧文本多行时可独立调整高度，右侧的两行文本始终保持紧凑无间隙。

问题原因 #

1. 原代码中右侧VStack添加了Spacer()，当左侧内容拉长整个HStack的高度时，这个Spacer会占据剩余垂直空间，将「2nd Value」向下推，导致与「2nd Title」之间出现间隙。
2. HStack使用了.center垂直对齐，当左侧VStack高度增加时，右侧VStack会整体居中，进一步加剧了两行文本的间距问题。

修改后的代码 #

struct ContentView: View {
    var body: some View {
        Form {
            Section {
                Text("single line")
            }
            
            TwoLineView(firstTitle: "1st Title", fistValue: "Value",
                       secondTitle: "2nd Title", secondValue: "2nd Value")
            
            TwoLineView(firstTitle: "1st Title", fistValue: "test",
                       secondTitle: "2nd Title", secondValue: "2nd Value")
            
            Section {
                Text("mutiple lines")
            }
            
            TwoLineView(firstTitle: "1st Title", fistValue: "This is long. This is long value. This is long value",
                       secondTitle: "2nd Title", secondValue: "2nd Value")
            
            TwoLineView(firstTitle: "1st Title", fistValue: "test",
                       secondTitle: "2nd Title", secondValue: "2nd Value")
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

struct TwoLineView: View{
    var firstTitle: String
    var fistValue: String
    var secondTitle: String
    var secondValue: String
        
    var body: some View {
        // 改动1：将HStack的垂直对齐改为.top
        HStack(alignment: .top, spacing: 0) {
            VStack(alignment: .leading, spacing: 0) {
                Text(firstTitle)
                    .lineLimit(1)
                    .font(.system(size: 30, weight: .heavy))
                
                // 改动2：移除frame(maxHeight: .infinity)，让文本自然扩展高度
                Text(fistValue)
            }
            Spacer()
            VStack(alignment: .leading, spacing: 0) {
                Text(secondTitle)
                    .lineLimit(1)
                    .font(.system(size: 30, weight: .heavy))
                
                Text(secondValue)
                    .lineLimit(1)
                
                // 改动3：移除右侧VStack中的Spacer()，避免撑开两行文本的间距
            }
            Spacer(minLength: 45)
        }
    }
}

关键改动说明 #

• HStack对齐方式改为.top：让左右两个VStack都从顶部开始布局，确保右侧的「2nd Title」始终和左侧的「1st Title」顶部对齐，不会因为左侧高度变化而整体偏移。
• 移除右侧VStack的Spacer()：彻底消除了多余空间对右侧两行文本的影响，保证它们始终紧凑排列。
• 移除左侧文本的maxHeight: .infinity：让左侧的多行文本自然占据所需高度，无需强制填充父视图，避免干扰整体布局的垂直空间分配。

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