利用 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 設定的頁面將顯示在右邊。