(SwiftUI) .background()がSafeAreaに侵入しちゃう

はじめに

VStackにbackgroundモディファイアを使用した際に，SafeAreaにまで背景色が反映されていました．
自分としては，SafeAreaには背景色は反映されず，VStack内のみで背景色が変わることが理想でした．

目次

1. 原因
2. 解決方法
3. まとめ
4. 参考文献

原因

原因としては
iOS15からは，VStack等がSafeAreaに接している際，接しているVStack等にbackgroundモディファイアを適用すると，SafeAreaにも背景色が反映されるらしい

struct ContentView: View {
    var body: some View{
        VStack {
            Text("Hello, world!")
            Spacer()
            Divider()
        }
        .background(Color.orange)
    }
}

ちなみに，上記コードでは，Spacer()とDivider()によって無理やりSafeAreaにVStackを触れさせています．

解決方法

もしSafeAreaには背景色を反映させたくないのなら，普通にZStackを使用して背景色を指定するのが良さそう．

struct ContentView: View {
    var body: some View{
        ZStack {
            Color.orange
            Text("Hello, world!")
        }
    }
}

また，上記コードのColor.~に，.ignoresSafeArea()を追加することで，SafeAreaを無視して全体に背景色を指定することができます．

まとめ

SafeAreaにVStack等が触れていると，backgroundモディファイアを使用した際にSafeAreaに背景色が侵食しちゃいます．
注意しましょう．

参考文献

• iOS 15 safe area background color unexpected change
• SwiftUI - How do I change the background color of a View?