【SwiftUI】safeAreaPaddingでScrollViewの開始位置と終了位置を調整する

はじめに

ScrollViewにpaddingを付けるとScrollViewが小さくなってしまいます。
しかし、safeAreaPaddingだとScrollViewは小さくならず、コンテンツのみにスペースが入っているっぽいです。

比較

paddingだとScrollViewが小さくなって途中で途切れているのがわかります。

padding	safeAreaPadding

paddingでの実装

import SwiftUI

struct ContentView: View {
    var body: some View {
        ScrollView(.horizontal, showsIndicators: false) {
            HStack(spacing: 10) {
                ForEach(0..<10) { _ in
                    RoundedRectangle(cornerRadius: 10)
                        .foregroundStyle(.cyan)
                        .frame(height: 60)
                        .containerRelativeFrame(.horizontal)
                }
            }
        }
        .padding(.horizontal, 20)
    }
}

safeAreaPaddingでの実装

import SwiftUI

struct ContentView: View {
    var body: some View {
        ScrollView(.horizontal, showsIndicators: false) {
            HStack(spacing: 10) {
                ForEach(0..<10) { _ in
                    RoundedRectangle(cornerRadius: 10)
                        .foregroundStyle(.cyan)
                        .frame(height: 60)
                        .containerRelativeFrame(.horizontal)
                }
            }
        }
        .safeAreaPadding(.horizontal, 20)
    }
}

公式ドキュメント