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

如果你想实现一个文本字段，你应该使用 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)
                                .multilineTextAilgnment(.center)
                        }
                        
                        Spacer(minLength: 0)
                        
                    }

Answer 2

HStack 在中心垂直对齐。 VStack 居中对齐，但您将其添加到 HStack 中，然后使用 Spacer().

将堆栈推向左侧

只需在VStack前加一个Spacer()即可。或者只是以下内容：

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

HStack 中的中心元素

Center Elements in HStack

swift

swiftui

vstack

hstack