SwiftUI列表行元素对齐问题：如何调整布局实现预期效果

针对你的布局需求，修改代码如下，可直接实现预期效果：

HStack(alignment: .center, spacing: 16) {
    Image(imageName ?? "")
        .renderingMode(.original)
        .resizable()
        .scaledToFit()
        .frame(height: 72.0)
    
    Text("1")
    
    VStack(alignment: .leading, spacing: 8) {
        Text("2")
        Text("3")
        Text("4")
    }
    
    Spacer()
    
    VStack(alignment: .trailing, spacing: 8) {
        Text("5")
        Text("6")
    }
}
.padding(.horizontal)

核心调整说明： #

• 垂直居中对齐：给HStack设置alignment: .center，让所有元素在垂直方向上保持居中，解决原布局中元素上下错位的问题。
• 空间分配：在中间的VStack（文本2、3、4）和右侧VStack（文本5、6）之间添加Spacer()，利用SwiftUI的自动布局逻辑，将右侧VStack推至行的最右端，中间VStack则占据剩余的中间空间。
• 内部文本对齐：中间VStack设置alignment: .leading让文本左对齐，右侧VStack设置alignment: .trailing让文本靠右对齐，完全匹配预期的文本排列方式。
• 间距优化：通过HStack的spacing参数控制元素间的距离，让布局更宽松自然，也可根据需求自行调整数值。

如果需要更精细的宽度控制，可给中间VStack添加固定宽度约束，例如：

VStack(alignment: .leading, spacing: 8) {
    Text("2")
    Text("3")
    Text("4")
}
.frame(width: 150) // 自定义中间区域宽度

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