【SwiftUI】VStackに背景色設定したらセーフエリアにまで侵食された件について

はじめに

本来セーフエリアは描画されないようになっているのですが、

なぜか背景色は侵食してしまうという記事です。

状況説明

まずはこんなコードを書きました

    var body: some View {
        VStack() {
            
            Spacer()
            
            HStack() {
                Text("おいらはテキスト")
            }
            .frame(maxWidth: .infinity, maxHeight: 100, alignment: .leading)
            .background(Color.red)
                        
        }
    }

これをプレビューで見ると下図のように映ります。

HStackの領域をわざと赤色にしてわかりやすくしています。

うん、セーフエリアにHStackがはみ出してるように見えないですかね？

じゃあHStackの高さを0にしてみたら・・・

やっぱはみ出してる、そして赤がいるーーー。

実は色だけがおかしくて領域は正しいサイズなんですよね。

見た目と領域が整合性が取れてないのは精神衛生上ヨクナイ。

理想

セーフエリアは絶対に描画しないで欲しいだけ

解決策(無理やり)

VStackをVStackで囲ってやり、上下をSpacer()で埋めるという荒技でいけました

        VStack() {
        
            Spacer()
            
            VStack() {
                
                Spacer()
                
                HStack() {
                    Text("おいらはテキスト")
                }
                .frame(maxWidth: .infinity, maxHeight: 100, alignment: .leading)
                .background(Color.red)                
            }
            
            Spacer()
        }

逆にセーフエリアも表示範囲にする場合

セーフエリアも表示範囲に含めたい場合↓のようにする

VStack() {
    // 好きにやる
}
.ignoresSafeArea()

この設定をしたら背景色が侵食されるのは普通です

おわりに

本当に謎です