[SwiftUI] SafeArea外の背景色は、隣り合うコンテンツの背景色を受け継ぐ

コンテンツがSafeArea外と隣り合っていないとき

struct ExampleView: View {
    var body: some View {
        VStack {
            HStack {
                Spacer()
            }
            .frame(height: 300)
            .background(.blue)
        }
    }
}

コンテンツがSafeArea外と隣接したとき

struct ExampleView: View {
    var body: some View {
        VStack {
            HStack {
                Spacer()
            }
            .frame(height: 300)
            .background(.blue)

            Spacer()
        }
    }
}

struct ExampleView: View {
    var body: some View {
        VStack {
            Spacer()

            HStack {
                Spacer()
            }
            .frame(height: 300)
            .background(.blue)
        }
    }
}

SafeArea外の背景色に隣接したコンテンツの背景色を受け継がせないように、ignoresSafeAreaEdgesを設定する

struct ExampleView: View {
    var body: some View {
        VStack {
            HStack {
                Spacer()
            }
            .frame(height: 300)
            .background(
                .blue,
                ignoresSafeAreaEdges: .horizontal
            )

            Spacer()
        }
    }
}

https://developer.apple.com/documentation/swiftui/view/background(ignoressafeareaedges:)