Swift程式設計[第4單元] SwiftUI動畫與繪圖

645分

樓主

個人積分：645分

文章編號：85405231

4-10c App (2) 搜尋作品列表

上一節提到的「資料與程式碼分離」以及「模組化」是程式設計兩個重要方法。這裡所謂的「資料與程式碼分離」，與「物件導向程式設計」將資料與函式包在一起，兩者並不衝突，就像前一節所示範，分離的資料指的是App的「內容」，而不是 struct 裡面需要的欄位變數或物件屬性。

「模組化」程式設計背後的哲學很簡單，就是將複雜的問題分解成若干單元，每個單元再細分為許多小問題，令每個程式模塊解決一個小問題，再由模塊組成模組，最後就能用幾個模組解決複雜問題。

這種做法就像建築大樓一樣，也是科學發展的方法之一，例如醫學將複雜的人體分為神經、消化、呼吸、循環…等幾個系統，每個系統再細分為器官，個別器官就比較容易研究與治療。這種方法之中，越是基礎的東西就越重要，基礎知識越紮實，累積起來的學問就越深厚；如果基礎的程式模塊都沒有bug，整合起來的模組或App就沒有問題。

但是這樣的方法要取得成功，必須有兩個條件：一是問題可以被拆解；二是模塊能夠組合且有效解決問題。

以「芝加哥藝術博物館」為例，在第3單元第4課3-4b就曾經拆解過，將問題分為以下5個步驟：

我們可以按照這樣的分解，來寫程式模塊，最後再組成「芝加哥藝術博物館」App。但是要如何確保模塊能順利組合呢？其實也很簡單，就是讓每個程式模塊都有明確的輸入、輸出介面，就像樂高積木一樣，如下圖：

對函式而言，每個函式都可定義輸入參數與回傳（輸出）的資料類型，所以函式很適合成為模塊；另外，有了上一節介紹的 @Binding，用 struct 定義的物件或視圖也有輸入與輸出的屬性，成為第二種程式模塊。

簡單的說，如果需要顯示畫面，就用 struct 視圖來構築模塊；若程式模塊要在背景執行（如非同步模式），不需要顯示畫面，就以函式來作為模塊。

在接下來第二步驟「搜尋作品列表」與第三步驟「取得作品資訊」，都是在背景用網路連接博物館的API，所以適合寫成函式模塊。

拆解出來的程式碼如下，成為App的第2個Swift檔案，主要模塊是「搜尋作品列表()」函式，同樣改成 async throws 函式，並增加一個參數max，限制回傳作品筆數。後面同樣寫一段程式作為預覽，以測試「畫家選單」與「搜尋作品列表」兩個模塊的組合：

// 4-10(2) 芝加哥藝術博物館v2
// Created (for 3-4a) by Heman, 2021/10/02
// Revised (for 4-10a) by Heman, 2022/07/16
import SwiftUI

// Data model for JSONDecoder
struct 搜尋結果: Codable {
    let pagination: 分頁資訊
    let data: [搜尋品項]
}

struct 分頁資訊: Codable {
    let total: Int
    let limit: Int
    let offset: Int
    let total_pages: Int
    let current_page: Int
}

struct 搜尋品項: Codable, Identifiable {
    let api_link: URL?
    let id: Int
    let title: String
}

func 搜尋作品列表(_ artist: String, max: Int) async throws -> [搜尋品項] {
    var myURLComponent = URLComponents()
    myURLComponent.scheme = "https"
    myURLComponent.host = "api.artic.edu"
    myURLComponent.path = "/api/v1/artworks/search"
    myURLComponent.query = "q=\(artist)&limit=\(max)"
    if let myURL = myURLComponent.url {
        let (內容, 回傳碼) = try await URLSession.shared.data(from: myURL)
        // print(回傳碼)
        let 解碼結果 = try JSONDecoder().decode(搜尋結果.self, from: 內容)
        return 解碼結果.data
    }
    return []
}

struct 測試_2: View {
    @State var 搜尋字串 = "Vincent van Gogh"
    @State var 作品列表: [搜尋品項] = []
    var body: some View {
        VStack {
            畫家選單(name: $搜尋字串)
                .onChange(of: 搜尋字串) { _ in
                    Task {
                        do {
                            作品列表 = try await 搜尋作品列表(搜尋字串, max: 20)
                        } catch {
                            print("網路有問題：\(error)")
                        }
                    }
                }
            List(作品列表) { 作品 in
                Label(作品.title, systemImage: "rectangle.portrait")
                    .font(.title2)
                    .lineLimit(1)
            }
            .task {
                do {
                    作品列表 = try await 搜尋作品列表(搜尋字串, max: 20)
                } catch {
                    print("網路有問題：\(error)")
                }
            }
        }
    }
}

struct 預覽_2: PreviewProvider {
    static var previews: some View {
        測試_2()
    }
}

預覽結果如下圖，完全等同4-10a的執行結果，表示拆解與組合是有效的：

Swift程式設計[第4單元] SwiftUI動畫與繪圖

小惡魔新聞台

小惡魔廣編特輯

今日熱門文章 網友點擊推薦！

今日熱門文章　網友點擊推薦！