利用 SwiftUI 的 NavigationView 實現 iPad 分割畫面

當我們使用 iPad App 時，時常看到如下圖的分割畫面設計。透過 SwiftUI ，我們可以輕易實現這樣的功能。

當我們使用 SwiftUI 的 NavigationView 管理頁面時，它在 iPad 上將自動變身分割畫面(split)，NavigationView 管理的第一個頁面則成為隱藏的側邊選單。

預設隱藏的側邊選單

以下顯示情歌歌單的 SongList 預設會成為隱藏的側邊選單，造成 iPad 一開始顯示一片空白的畫面。

struct SongList: View {
    let songs = ["怎樣", "街角的祝福", "野薔薇", "愛瘋了", "光著我的腳丫子", "多麼想念你", "一個人的行李", "習慣這樣", "不想"]
    
    var body: some View {
        NavigationView {
            List(songs, id: \.self) { song  in
                
                NavigationLink {
                    Image(song)
                        .resizable()
                        .scaledToFit()
                } label: {
                    Text(song)
                }
            }
            .navigationBarTitle("戴佩妮")
        }
    }
}

別緊張，只要在畫面上向右拖曳，即可叫出側邊選單，在左邊顯示 SongList。

點選 SongList 裡的某一首歌時，NavigationLink 參數 destination 設定的頁面將立即出現。如下圖所示，點選怎樣後，怎樣的專輯圖片出現了。

若想呈現完整的專輯圖片，可點選畫面空白處將側邊選單隱藏。

橫向 iPad 時，不再隱藏的側邊選單

iPad 的分割畫面在螢幕直向(portrait) & 橫向(landscape)時有不同的設計，接下來就讓我們點選 Simulator 選單的 Rotate，將它轉成橫向瞧瞧吧。

當 iPad 是橫向時，側邊選單將不再隱藏，永遠顯示在左邊。此時畫面的寬度較長，因此 App 覺得它有足夠空間同時顯示兩個畫面。

此時當我們點選某一首歌時，NavigationLink 參數 destination 設定的頁面將顯示在右邊。