SwiftUI Form中如何消除首个Section顶部空白？

嘿，我太懂你遇到的这个烦恼了！试了调整Section的header框架却没效果？其实那个空白根本不是Section header带来的，而是SwiftUI Form底层的UITableView默认自带的顶部空间。给你分享几个靠谱的解决方法：

方法1：修改Form的ListStyle #

默认的Form样式（比如InsetGroupedListStyle）会自带顶部间距，换成PlainListStyle能直接去掉这个空白，不过样式会更简洁：

var body: some View {
    VStack {
        Text("Text 1")
        Form {
            Section {
                Text("Text 2")
            }
        }
        .listStyle(PlainListStyle())
    }
}

方法2：通过UITableView外观全局调整 #

因为SwiftUI的Form本质是UITableView，我们可以直接设置它的tableHeaderView为极小高度的视图，从根源消除顶部空白：

// 可以放在你的View的init里，或者App的初始化方法中
init() {
    UITableView.appearance().tableHeaderView = UIView(frame: CGRect(x: 0, y: 0, width: 0, height: CGFloat.leastNormalMagnitude))
}

var body: some View {
    VStack {
        Text("Text 1")
        Form {
            Section {
                Text("Text 2")
            }
        }
    }
}

注意：这个设置是全局的，会影响所有Form和List，如果只想针对当前Form生效，可以在onAppear里设置，onDisappear里恢复原来的设置。

方法3：临时用负padding应急（不推荐长期用） #

如果上面两种方法都不符合你的样式需求，也可以给Form加个负的顶部padding快速解决，但要注意不同设备的适配问题：

var body: some View {
    VStack {
        Text("Text 1")
        Form {
            Section {
                Text("Text 2")
            }
        }
        .padding(.top, -16) // 数值可以根据实际情况调整
    }
}

为什么你之前调整Section header没用？因为那个空白是Form整体的顶部内边距，不是Section的header空间，所以针对Section的设置自然起不到作用啦～

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