SwiftUI中如何在不拉伸容器的情况下将元素对齐到trailing端

要在不拉伸父容器宽度的前提下，让按钮在现有容器范围内右对齐，同时保持其他元素左对齐，只需给包含按钮的HStack添加frame(maxWidth: .infinity, alignment: .trailing)修饰符即可。该设置会让HStack填充父级VStack的现有宽度（由前面的文本内容决定），而非强制拉伸至屏幕宽度。

修改后的完整代码如下：

var body: some View {
    VStack(alignment: .leading, spacing: 0) {
        Spacer()
        VStack {
            VStack(alignment: .leading) {
                Text("Long text to stretch container a bit")
                    .font(.body)
                    .padding(.bottom)
                Text("But not stretch too much")
                    .font(.caption2)
                    .opacity(0.8)
                HStack() {
                    Button(action: {print("Hello")}) {
                        Text( "\(Image(systemName: \"chevron.right\"))")
                    }
                    .buttonStyle(.borderedProminent)
                }
                // 关键修饰符：在现有容器宽度内右对齐按钮
                .frame(maxWidth: .infinity, alignment: .trailing)
            }
            
        }
        .padding()
        .background(Color.accentColor)
        .cornerRadius(15)
    }
}

原理说明 #

• frame(maxWidth: .infinity)：让HStack占据父级容器的全部可用宽度，但这个宽度由前面的文本内容自然撑开，不会强制扩展到屏幕边缘。
• alignment: .trailing：将HStack内的按钮对齐到右侧，同时完全保留父容器的原始尺寸。

此前使用Spacer()导致容器拉伸，是因为Spacer()会尽可能占据所有剩余空间，触发父容器自动扩展到屏幕宽度。而上述方案是在现有容器尺寸内调整元素对齐，不会改变容器的整体宽度。

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