SwiftUI应用内容无法垂直居中，新手求排查与解决方案

为什么用Form不合适？ #

没错，单个输入框完全没必要用Form。Form是为多条目表单设计的容器，自带列表式布局逻辑，默认会尽可能占据垂直空间，还会添加系统默认的列表样式（比如分组、分隔线），这就是你加Spacer后Form没居中的核心原因——Form的布局优先级会覆盖Spacer的空间分配逻辑。

垂直居中的解决办法 #

直接替换Form为普通布局容器，给TextField添加合适样式模拟输入框效果，同时移除不必要的NavigationView（你这里不需要导航功能，它会额外占用布局空间），就能让内容正常垂直居中。

修改后的代码：

import SwiftUI

struct CreateTopic: View {
    @State private var name = ""
    
    var body: some View {
        VStack {
            Text("Create Topic")
                .font(.largeTitle)
            
            Spacer()
            
            // 替换Form为带样式的TextField
            TextField("Name", text: $name)
                .textFieldStyle(.roundedBorder) // 模拟系统输入框样式
                .padding(.horizontal) // 左右留边避免贴屏幕
            
            Spacer()
            
            // 移除多余的NavigationView
            StandardButton(text: "Test", action: {})
        }
        .frame(minWidth: 0, maxWidth: .infinity, minHeight: 0, maxHeight: .infinity)
    }
}

// 补充StandardButton定义以保证代码可运行
struct StandardButton: View {
    let text: String
    let action: () -> Void
    
    var body: some View {
        Button(text) {
            action()
        }
        .buttonStyle(.borderedProminent)
    }
}

struct CreateTopic_Previews: PreviewProvider {
    static var previews: some View {
        CreateTopic()
    }
}

关键调整点 #

• 移除Form：用单个带样式的TextField替代，避免Form的默认布局干扰。
• 删除多余的NavigationView：它会在内部创建导航栈，占用额外布局空间，导致按钮位置异常。
• 保留Spacer和全屏frame：确保VStack占满整个屏幕，Spacer会自动把中间的TextField和上下的标题、按钮挤到垂直居中的位置。

如果需要更贴近原Form的输入框样式，也可以自定义TextField外观：

TextField("Name", text: $name)
    .padding()
    .background(Color(.systemGray6))
    .cornerRadius(8)
    .padding(.horizontal)

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