SwiftUI：如何让VStack中单个子视图与其他视图对齐方式不同

我有一个设置为左对齐的VStack，内部包含多个子视图，其中有一个由Text和Button组成的HStack。希望让这个HStack在屏幕上水平居中，同时其他所有视图保持VStack原有的左对齐方式。

当前所有子视图均为左对齐，代码如下：

@State private var email: String = ""
@State private var password: String = ""

var body: some View {
    VStack(alignment: .leading, spacing: 30) {
        
        Text("Create account")
        TextField("Email", text: $email)
            .textFieldStyle(.roundedBorder)
        TextField("Password", text: $password)
            .textFieldStyle(.roundedBorder)
        Button("Create Account") {
            print("Create account now")
        }
            
        HStack {
            Text("Already have an account? ")
                
            Button("Login") {
            }
        }
        Spacer()
    }.padding(20)
}

我曾尝试通过添加水平内边距调整，但这个HStack始终无法完全水平居中，调整后的代码片段如下：

HStack {
    Text("Already have an account? ")   
    Button("Login") {
    }
}
.padding(.horizontal, 50)

解决方案 #

你可以通过以下两种方式轻松实现需求：

方法一：给目标HStack添加全屏宽度框架并居中

给需要居中的HStack添加frame(maxWidth: .infinity)让它占据VStack的全部可用宽度，再设置alignment: .center，这样HStack的内容就会在整个宽度范围内水平居中，同时不影响VStack其他子视图的左对齐。

修改后的HStack代码：

HStack {
    Text("Already have an account? ")
    Button("Login") {
    }
}
.frame(maxWidth: .infinity, alignment: .center)

方法二：用全屏宽度的HStack包裹目标HStack

另一种方式是把需要居中的HStack放在一个新的HStack里，给外层HStack设置maxWidth: .infinity和alignment: .center，同样能实现居中效果：

HStack(maxWidth: .infinity, alignment: .center) {
    HStack {
        Text("Already have an account? ")
        Button("Login") {
        }
    }
}

完整修改后的代码 #

@State private var email: String = ""
@State private var password: String = ""

var body: some View {
    VStack(alignment: .leading, spacing: 30) {
        
        Text("Create account")
        TextField("Email", text: $email)
            .textFieldStyle(.roundedBorder)
        TextField("Password", text: $password)
            .textFieldStyle(.roundedBorder)
        Button("Create Account") {
            print("Create account now")
        }
            
        // 使用方法一的修改
        HStack {
            Text("Already have an account? ")
            Button("Login") {
            }
        }
        .frame(maxWidth: .infinity, alignment: .center)
        
        Spacer()
    }.padding(20)
}

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