SwiftUI开发：调整表单顶部边距与去除按钮白色背景

一、调整顶部空白（适配刘海屏） #

当前顶部多余空白由NavigationView默认导航栏占位、Form分组样式间距共同导致，按以下方式修复：

• 给NavigationView添加navigationBarHidden(true)，彻底隐藏默认导航栏，消除顶部占位空白。
• 给Form设置listStyle(.plain)，移除分组样式自带的上下间距，让输入框更贴近顶部。
• 给NavigationView添加edgesIgnoringSafeArea(.top)，确保内容不被刘海遮挡，同时让界面顶到安全区边界，避免怪异空白。

二、移除按钮白色背景 #

按钮外层的Section是Form专属组件，单独使用会自动生成白色背景容器，直接移除该Section，用padding控制按钮间距即可保留纯蓝色按钮样式。

修改后的完整代码 #

import SwiftUI

struct ContentView: View {
    @State var textPlaceholder = "" // 遵循Swift小驼峰命名规范
        
    var body: some View {
        GeometryReader { geo in
            NavigationView{
                VStack(spacing: 0) {
                    Form {
                        Section {
                            TextField("Placeholder", text: $textPlaceholder)
                                .multilineTextAlignment(.center)
                                .frame(height: geo.size.height * 0.65, alignment: .center)
                        }
                    }
                    .listStyle(.plain)
                    .navigationBarHidden(true)
                    
                    Button(action: {}) {
                        Text("Submit")
                            .frame(width: 250, height: 50, alignment: .center)
                            .background(Color.blue)
                            .foregroundColor(.white)
                            .cornerRadius(8)
                    }
                    .padding()
                }
            }
            .edgesIgnoringSafeArea(.top)
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
            .preferredColorScheme(.light)
            .previewInterfaceOrientation(.portraitUpsideDown)
    }
}

关键改动说明 #

1. 导航栏隐藏：navigationBarHidden(true)解决了NavigationView默认的顶部空白占位问题。
2. Form样式调整：listStyle(.plain)移除了Form分组默认的上下间距，让输入框布局更紧凑。
3. 移除冗余Section：按钮外层的Section是导致白色背景的根源，移除后蓝色按钮样式完全显示。
4. 安全区适配：edgesIgnoringSafeArea(.top)确保内容避开刘海区域，同时消除顶部不必要的空白。

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