【SwiftUI】セーフエリア外の全画面にコンテンツを配置する方法

SwiftUIはデフォルトだと、ビューがセーフエリアの内側に配置されるようになっている。

セーフエリアとは、iPhoneXなどのように画面の角丸などがあっても安全にコンテンツがレイアウトできる領域、またステータスバーなどと干渉しない領域のことで、単純に背景を塗り潰したビューを確認すると次のように上下に白い余白が生まれる。

しかし画像などを表示する場合など、この余白部分にも表示させたいこともある。

そんな時はedgesIgnoringSafeAreaモディファイアを使用すれば良い。

edgesIgnoringSafeAreaの使い方

今回は分かりやすく、画像ではなくColorを使った塗り潰しの例を見てみる。

struct ContentView: View {
    var body: some View {
        Color(red: 0, green: 1, blue: 1)
            .edgesIgnoringSafeArea(.vertical)
    }
}

edgesIgnoringSafeAreaの引数にはセーフエリアを無視するエッジセットを、以下のタイププロパティで指定する。

プレビューを確認すると上下の余白が消え、次のとおり全体が塗り潰されていることが分かる。