🔥
[SwiftUI] 画面の上下に謎の余白が表示された場合の対処法
はじめに
以下の環境で動作検証しました。
- Xcode 12.5 (12E262)
- iOS 14.6
動作検証に使用したSwiftUIコード
以下、動作検証に使用したSwiftUIのコードを示します。画面全体を灰色で塗りつぶす処理をしています。
import SwiftUI
struct ContentView: View {
var body: some View {
ZStack {
Color.gray.edgesIgnoringSafeArea(.all)
VStack {
Text("Hello, world!")
}
}
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}
症状
まずは正常に動作しているときのスクリーンショットを示します。
次に画面の上下に余白が表示されている状態のスクリーンショットを示します。コードには一歳手を加えていません。
原因と解決方法
上下に余白が表示されるのはInfo.plistからUILaunchScreenキーが削除されていたのが原因でした。このキーが存在しない場合、画面サイズは古いiPhoneにフォールバックされます。
突然アプリの上下に余白が発生したときはInfo.plistを確認してみてください。以下のようにUILaunchScreenキーのみ存在していればOKです。dictの中身は空でも問題ありません。
...
<key>UILaunchScreen</key>
<dict/>
...
Discussion