如何在 VStack 中居中对齐文本字段？答案

【问题标题】：How to center-align a Textfield in a VStack?如何在 VStack 中居中对齐文本字段？
【发布时间】：2021-12-28 21:22:02
【问题描述】：

我正在尝试将 Android 应用程序移植到 iOS。我希望文本字段在中间对齐。我如何实现这一目标？到目前为止的代码如下：

var body: some View
{
    GeometryReader
    {
        metrics in
        
        VStack (alignment: .center)
        {
            Text("Lazuli Social")
        .font(.largeTitle)
    .foregroundColor(Color(red: 0.02, green: 0.325, blue: 1.0))
    
            TextField("Username or email", text: $user)
        .textFieldStyle(.roundedBorder)
        .frame(width:  metrics.size.width*0.80)
        .background(Color.orange)

        }
    
    }
}

【问题讨论】：

标签： ios swift swiftui

【解决方案1】：

您可以使用alignment 或frame 或VStack。您还需要将maxWidth 设置为infinity，以便它展开。

struct ContentView: View {
    
    @State private var user = ""
    
    var body: some View
    {
        GeometryReader
        {
            metrics in
            VStack
            {
                Text("Lazuli Social")
                    .font(.largeTitle)
                    .foregroundColor(Color(red: 0.02, green: 0.325, blue: 1.0))
                
                TextField("Username or email", text: $user)
                    .textFieldStyle(.roundedBorder)
                    .frame(width:  metrics.size.width*0.80)
                    .background(Color.orange)
            }
            .frame(maxWidth: .infinity, alignment: .center) //<-- Here
        }
    }
}

一般来说，您可能希望尽量避免使用GeometryReader，除非您绝对需要大小。例如，在这里，您可能想改用padding（尽管它给出的结果略有不同——它不会一直是宽度的 80%）。

struct ContentView: View {
    
    @State private var user = ""
    
    var body: some View
    {
        VStack
        {
            Text("Lazuli Social")
                .font(.largeTitle)
                .foregroundColor(Color(red: 0.02, green: 0.325, blue: 1.0))
            TextField("Username or email", text: $user)
                .textFieldStyle(.roundedBorder)
                .background(Color.orange)
                .padding(.horizontal, 20)
        }
        .frame(maxWidth: .infinity, alignment: .center)
    }
}

【讨论】：

非常感谢！

【解决方案2】：

也许试试： .multilineTextAlignment(.center)

【讨论】：

您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息，例如引用或文档，以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center。