SwiftUI中如何让水平栈内两个元素分别对齐两端？

要让HStack中的文本区域和箭头图标分别对齐容器左右两端，只需在两者之间添加一个Spacer()，它会自动填充中间的剩余空间，将两侧元素推至两端。

修改后的完整代码如下：

var body: some View {
    Button {
        // 此处添加按钮点击逻辑
    } label: {
        HStack {
            VStack(alignment: .leading) {
                Text("Max Mustermann")
                Text("Mustermann GmbH")
                    .fontWeight(.thin)
            }
            Spacer() // 核心：用Spacer填充中间空白，实现两端对齐
            Image(systemName: "arrow.forward.circle")
        }
        .frame(minWidth: 320, minHeight: 50)
        .foregroundColor(.black)
        .padding()
        .overlay(
            RoundedRectangle(cornerRadius: 15)
                .stroke(.gray, lineWidth: 1)
        )
    }
}

关键说明 #

• Spacer()是SwiftUI中用于分配布局剩余空间的视图，放在HStack的两个元素之间时，会占据所有可用的水平空间，强制左右元素分别靠向容器的左右边缘
• 保留frame(minWidth: 320)确保按钮有固定的最小宽度，保证布局一致性
• 原代码中的.frame(alignment: .leading)可以移除，因为Spacer已经实现了预期的对齐效果，保留也不会影响最终布局

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