【SwiftUI】SectionのHeaderとContentのspacingを調整する

はじめに

こんにちは。ymurao2です！
Viewのグループ化をSectionを利用して行う際、HeaderとContentのスペースの調整方法が分からなかったので、記事に残しておきます

想定する画面

想定する画面は以下のようなものです。
Contentの上にHeaderを表示しています。

実装

var body: some View {
+   VStack(spacing: 0) {
        Section {
            Text("Content")
                .font(.title)
                .frame(maxWidth: .infinity)
                .frame(height: 300)
                .background(Color.gray.opacity(0.2))
        } header: {
            Text("Header")
                .font(.caption)
                .frame(maxWidth: .infinity, alignment: .leading)
                .background(Color.gray.opacity(0.4))
        }
+  }
}

SectionをVStackで囲んで、spacingを付与することでContentとHeaderのスペースを調整できることがわかりました。
0を指定することで、ContentとHeaderがピッタリくっついています。

var body: some View {
    VStack(spacing: 8) {
        Section {
            // 省略
        } header: {
            // 省略
    }
}

spacingに8を指定したときは以下のとおりです

おわりに

当然と言えば当然かもしれませんが、簡単に実装できました
（もっと早く知りたかった...）