HStack中的中心元素

Question

我正在尝试实现一个居中的文本字段，但我似乎不能这样做。我试着用3种不同的方式来做，但它仍然是领先的。

//Mobile Number Field
                    
                    HStack(alignment: .center) {
                        
                        //Enter your number field
                        VStack(alignment: .center, spacing: 6){
                            Text("+ \(loginData.getCountryCode()) \(loginData.phoneNumber)")
                                .foregroundColor(Color.white)
                                .font(Font.custom("URWDIN-Thin", size: 20))
                                .padding(.top, 40)
                                .frame(alignment: .center)
                        }
                        
                        Spacer(minLength: 0)
                        
                    }

因此，我尝试通过HStack和VStack构造函数以及文本的框架对齐它。我的结果仍然是：

​

用户输入的文本也是对齐的。对如何解决这个问题有什么见解吗？

Answer 1

HStack在中间垂直对齐。VStack在中间对齐，但是您在HStack中添加了它，然后使用Spacer()将堆栈推到左边。

只需在Spacer()之前添加VStack即可。或者只是以下几点：

HStack {
    Spacer()
    Text("In the center")
    Spacer()
}

Answer 2

如果要实现文本字段，应该使用TextField…但是我想，要比您想要对齐一个文本，所以，实现如下：.multilineTextAlignment(.center)在您的代码。

如果要显式地对文本进行居中，请使用以下内容更改填充参数：.padding(.horizontal, 40)。

//Mobile Number Field
                    
                    HStack(alignment: .center) {
                        
                        //Enter your number field
                        VStack(alignment: .center, spacing: 6){
                            Text("+ \(loginData.getCountryCode()) \(loginData.phoneNumber)")
                                .foregroundColor(Color.white)
                                .font(Font.custom("URWDIN-Thin", size: 20))
                                .padding(.horizontal, 40)
                                .multilineTextAlignment(.center)
                        }
                        
                        Spacer(minLength: 0)
                        
                    }