本單元到目前為止，我們已經學會不少網路程式功能，包括：

  1. 對 URL/URLComponents 網址的操作，就算包含中文也沒問題
  2. 熟悉 URLSession 連接網路的步驟
  3. 了解非同步(asynchronous)的運作模式
  4. 能夠下載圖片、音樂、JSON等檔案並加以運用
  5. 能夠連接 Open API，搜尋 iTunes 資料庫

本節就結合這幾個功能，做出一個App的雛型，能夠搜尋 iTunes 音樂，顯示搜尋的曲目列表，當使用者點選曲目時，可以顯示專輯封面並且播放試聽曲目。

先看下執行結果的影片，記得將聲音打開。本節範例程式在macOS與iPadOS的執行畫面稍有不同，這是NavigationStack 的特性，本影片是 macOS 的範例：

https://youtu.be/v6Bf4jksRko

為了達成這樣的操作，需要引進兩個搭配的視圖物件：NavigationView (導覽視圖，改用 NavigationStack)與NavigationLink (連結視圖)，基本的用法如下圖：

image.png

在之前範例3-3a, 3-3b已經用過 List() 來產生列表，列表每個項目是 Label() 視圖。在此3-3d則是在最內層的 Label() 外面加一層 NavigationLink() ，讓每個 Label() 連結到右方「試聽頁面()」，也就是說，當使用者輕點 Label() 曲目時，右方會出現該曲目的試聽頁面。

而在 List() 外層，則是增加一層 NavigationView()，控制整個列表與試聽頁面之間的切換。

在 List() 底下有一個視圖修飾語，navigationTitle() 顯示整個列表的標題，另一行 Text() 則是在曲目尚未被點選之前，顯示在試聽頁面的提示文字。

因此，NavigationView 與 NavigationLink 的搭配方式，通常是由 NavigationLink 負責內圈個別項目的連接畫面，而NavigationView 則是控制整體的畫面切換。示意圖如下：