[SwiftUI] Listのスペースをmodifierで追加する

# はじめに
SwiftUIのListに対してpadding以外の方法でスペース追加ができるのか調べてみました
iOS17以降では`listSectionSpacing`を使うことでListのセクションにスペースが追加できるようになっていました

# 環境
Xcode 15.2

# 内容

例えばこのようなシンプルなListの実装があるとして

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/631585/6feeb499-c215-ab1c-3217-11d3ab3555ce.png" width="300">

```swift
struct ListSpacingView: View {
    var body: some View {
        List {
            Section {
                Text("HogeHoge")
                Text("HogeHoge")
                Text("HogeHoge")
            }

            Section("Section Title") {
                Text("HogeHoge")
                Text("HogeHoge")
                Text("HogeHoge")
            }
        }
        .listStyle(.insetGrouped)
    }
}
```

このListのセクションやセルに対してのスペースをmodifierを使って実装します


## `listRowSpacing`

iOS15以降で使える`listRowSpacing`を使うことでセルのスペースは簡単に追加することができます

https://developer.apple.com/documentation/swiftui/view/listrowspacing(_:)

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/631585/6431376a-5565-9c48-b14e-4e089f25cef0.png" width="300">


```diff_swift
struct ListSpacingView: View {
    var body: some View {
        List {
            Section {
                Text("HogeHoge")
                Text("HogeHoge")
                Text("HogeHoge")
            }

            Section("Section Title") {
                Text("HogeHoge")
                Text("HogeHoge")
                Text("HogeHoge")
            }
        }
        .listStyle(.insetGrouped)
+       .listRowSpacing(10.0)
    }
}
```

リストのstyleが違うと見え方も変わります。わかりやすくスペースを`20`追加したものを表示しました

- `.plain`
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/631585/d3a297c4-2384-e046-6faf-07863deee041.png" width="200"><img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/631585/073bdad3-ef9a-559b-a934-4b2efbce6d6f.png" width="200">

- `.grouped`
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/631585/bcea3c91-c8ff-dea4-1bec-c048d28dd431.png" width="200"><img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/631585/03250794-7df5-3110-68ed-f504b363b64b.png" width="200">

## `listSectionSpacing`
iOS17以降では`listSectionSpacing`でセクションのスペースを追加することができます

https://developer.apple.com/documentation/swiftui/view/listsectionspacing(_:)-a2sn

```diff_swift
struct ListSpacingView: View {
    var body: some View {
        List {
            Section {
                Text("HogeHoge")
                Text("HogeHoge")
                Text("HogeHoge")
            }

            Section("Section Title") {
                Text("HogeHoge")
                Text("HogeHoge")
                Text("HogeHoge")
            }
        }
        .listStyle(.insetGrouped)
+       .listSectionSpacing(30)
    }
}
```

スペース：`0`→`30`→`100`

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/631585/30397577-528c-6f70-44cb-ff0c22701809.png" width="200"><img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/631585/fb088f48-1422-23fe-2265-a18093635871.png" width="200"><img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/631585/9b438774-4683-7411-b5f9-c75a30d143ef.png" width="200">

- `.plain`
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/631585/d3a297c4-2384-e046-6faf-07863deee041.png" width="200"><img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/631585/5c2073a7-dcc6-da54-3105-692df6a93f02.png" width="200">

- `.grouped`
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/631585/bcea3c91-c8ff-dea4-1bec-c048d28dd431.png" width="200"><img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/631585/7d9440bb-09a2-2a4b-12b6-91b95810ee36.png" width="200">

### `ListSectionSpacing`

スペースの値ではなく
`static let compact: ListSectionSpacing`を渡すこともできます

`static func custom(CGFloat) -> ListSectionSpacing`こちらで値を指定することもできるみたいです。直接スペースの値を入れるのと変わらない？🧐

https://developer.apple.com/documentation/swiftui/listsectionspacing

- `.listSectionSpacing(.compact)`
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/631585/254f610a-b7c9-f291-61af-557f27dcf091.png" width="200"><img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/631585/ac62f4ab-0d69-619f-1057-894674f4e035.png" width="200">

- `.listSectionSpacing(.custom(30))`
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/631585/254f610a-b7c9-f291-61af-557f27dcf091.png" width="200"><img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/631585/ca773fda-3ae9-a502-6de7-322d7a085783.png" width="200">
`.listSectionSpacing(30)`と同じ効果のようですね

# おわりに

各セクションでスペースの値を変えたいなどあれば、paddingを使う方が良いとは思いつつ、Listに対してのmodifierで要件が満たせる場合は積極的に使いたいと思いました