【SwiftUI】iPadでNavigationViewを使うと起動時に知らない白紙画面が表示される

概要

SwiftUIでアプリを作成するとき、NavigationViewを使用する方は多いと思います。　

筆者もその1人で、個人制作でアプリを作成しているときにNavigationViewを使ったのですが、審査に出す時に「iPadに対応させなさい」と言われてしまい。今までiPhoneで作成していたアプリを急にiPadでもビルドすることになりました。

その時に、iPadではNavigationViewをそのまま使うと起動時に呼び出されるViewがNavigation側に持っていかれてしまい、知らない白紙の画面が表示されることに気がつきました。

起こった現象と、解決策を書いておくので同じ現象で困った人は参考にしていただけると幸いです。

NavigationViewとは？

SwiftUIのNavigationViewで何ができるのか、GPT-4に聞いてみました。

SwiftUIのNavigationViewを使用すると、以下のことができます：

• 階層型インターフェイスの作成: 複数のビュー間でのナビゲーションをサポートし、階層型のユーザーインターフェイスを構築できます。

• ナビゲーションバーのカスタマイズ: タイトル、ボタン、スタイルなど、ナビゲーションバーの外観と動作をカスタマイズできます。

• ディテールビューの管理: マスター・ディテールインターフェイスでディテールビューを表示および管理できます。

• リンクの作成: NavigationLink を使用して、異なるビュー間の移動を実装できます。

• アダプティブUIのサポート: 異なるデバイスや画面サイズに合わせてUIが適応します。

大体書きたかったことが3秒で出力されました。正直、こんな記事を読むくらいならChatGPTに聞いたほうが早いかもしれませんね😇

プログラム

下のプログラムは、NavigationViewを実装し、NavigationBarTitleを実装した最小限のプログラムです。

import SwiftUI

struct ContentView: View {
    var body: some View {
        NavigationView {
            VStack {
                Text("Hello World")
                    .font(.largeTitle)
                    .padding()
            }
            .navigationTitle("Home")
        }
    }
}

#Preview {
    ContentView()
}

このプログラムは、iPhoneでは次のように表示されますが、、、、

iPadでは次のようになってしまい、思ったように表示されません。😭

解決方法

解決方法は至って単純で、NavigationViewに下記のプログラムを追加するだけです。

 .navigationViewStyle(.stack)

全体像

import SwiftUI

struct ContentView: View {
    var body: some View {
        NavigationView {
            VStack {
                Text("Hello World")
                    .font(.largeTitle)
                    .padding()
            }
            .navigationTitle("Home")
        }
        //これを追加する
        .navigationViewStyle(.stack)
    }
}

#Preview {
    ContentView()
}

最後に

このように実装することで、iPadでNavigationViewを使っても、知らない白紙のViewが表示されなくなります。

それではみなさん楽しいSwiftライフを〜〜〜！

終わり