• 進階程式設計(以Swift為例)

近代藝術家(3)

• 講義

• 製作完一本具有目錄的電子書，再來我們要使用列表的概念來建立一套不同藝術家的電子書。我們可以透過美國芝加哥藝術博物館以CC0協議開放的館藏圖庫(近5萬張名畫圖片免費下載)，來練習實作一套近代藝術家電子書，圖庫網址: https://www.artic.edu/collection

  開始撰寫近代藝術家(以米勒、莫內、雷諾瓦、梵谷、畢卡索為例)的電子書套書，操作步驟如下：

  • 點選畫面左方右上角的「+」號新增頁面，如下圖。

  

  • 修改頁面的名稱，如下圖。

  

  • 開始撰寫近代藝術家電子書

  開始撰寫近代藝術家電子書，請在 Playgounds 程式碼區輸入以下的程式：

  // 顯示圖片:Image
  // 使用 Apple Swift Playgrounds
  // Created by Philip, Heman, Jean 2024/08/09
  // Revised by Jean 2024/08/09
  import PlaygroundSupport
  import SwiftUI
  
  // Data model for Picker
  struct 藝術家: Identifiable {
     var id: String { 中文名 }
     var 中文名: String
     var 英文名: String
  }
  
  let 近代藝術家: [藝術家] = [
     藝術家(中文名: "米勒", 英文名: "Jean Francois Millet"),
     藝術家(中文名: "莫內", 英文名: "Claude Monet"),
     藝術家(中文名: "雷諾瓦", 英文名: "Pierre-Auguste Renoir"),
     藝術家(中文名: "梵谷", 英文名: "Vincent van Gogh"),
     藝術家(中文名: "畢卡索", 英文名: "Pablo Picasso"),
  ]
  
  /// 選擇藝術家，取得中文名
  struct 畫家選單: View {
     @Binding var name: String
     var body: some View {
         HStack {
             Image(systemName: "list.bullet")
             Picker("藝術博物館", selection: $name) {
                 ForEach(近代藝術家) { 畫家 in
                     Text("\(畫家.中文名)(\(畫家.英文名))")
                 }
                 // .pickerStyle(.inline)
             }
         }
     }
  }
  
  struct 藝術品資料: Identifiable {
     let id = UUID()
     let 作者: String
     let 標題: String
     let 網址: String
     let 標註: String
  }
  
  let 藝術作品集: [藝術品資料] = [
     藝術品資料(
         作者: "米勒",
         標題: "作品1", 
         網址: "https://www.artic.edu/iiif/2/681c9b51-6682-3f8c-dac8-ad250ed82240/full/1686,/0/default.jpg", 
         標註: "圖片/資料來源:芝加哥藝術博物館 \n作品說明:Young Woman Date: 1844/45\n"),
     藝術品資料(
         作者: "米勒",
         標題: "作品2", 
         網址: "https://www.artic.edu/iiif/2/82224b5e-42bd-cb6e-67c6-ff42e858cac9/full/1686,/0/default.jpg", 
         標註: "圖片/資料來源:芝加哥藝術博物館 \n作品說明:Woman Feeding Chickens Date: 1846/48\n"),
     藝術品資料(
         作者: "米勒",
         標題: "作品3", 
         網址: "https://www.artic.edu/iiif/2/7b0ea6ca-9424-050e-7e0e-3b67d2289480/full/1686,/0/default.jpg", 
         標註: "圖片/資料來源:芝加哥藝術博物館 \n作品說明:Peasants Bringing Home a Calf Born in the Fields Date: 1864\n"),
     藝術品資料(
         作者: "莫內",
         標題: "作品1", 
         網址: "https://www.artic.edu/iiif/2/3c27b499-af56-f0d5-93b5-a7f2f1ad5813/full/1686,/0/default.jpg", 
         標註: "圖片來源:芝加哥藝術博物館 \n作品說明:Claude Monet, The Water Lilies – The Clouds, 1920–1926\n資料來源:維基百科"),
     藝術品資料(
         作者: "莫內",
         標題: "作品2", 
         網址: "https://www.artic.edu/iiif/2/95be2572-b53d-8e7b-abc9-10eb48d4fa5d/full/1686,/0/default.jpg", 
         標註: "圖片/資料來源:芝加哥藝術博物館\n作品說明:The Beach at Sainte-Adresse Date: 1867"),
     藝術品資料(
         作者: "莫內",
         標題: "作品3", 
         網址: "https://www.artic.edu/iiif/2/0f1cc0e0-e42e-be16-3f71-2022da38cb93/full/1686,/0/default.jpg", 
         標註: "圖片/資料來源:芝加哥藝術博物館 \n作品說明:Arrival of the Normandy Train, Gare Saint-Lazare Date: 1877"),
     藝術品資料(
         作者: "雷諾瓦",
         標題: "作品1", 
         網址: "https://www.artic.edu/iiif/2/3a608f55-d76e-fa96-d0b1-0789fbc48f1e/full/1686,/0/default.jpg", 
         標註: "圖片/資料來源:芝加哥藝術博物館 \n作品說明:Two Sisters (On the Terrace) Date:1881"),
     藝術品資料(
         作者: "雷諾瓦",
         標題: "作品2", 
         網址: "https://www.artic.edu/iiif/2/8f06717c-9ede-f22b-d13b-327a50c22f9c/full/1686,/0/default.jpg", 
         標註: "圖片/資料來源:芝加哥藝術博物館 \n作品說明:Woman at the Piano Date:1875/76"),
     藝術品資料(
         作者: "雷諾瓦",
         標題: "作品3", 
         網址: "https://www.artic.edu/iiif/2/1a1b74fe-ff2a-8991-0581-5d420f0b840e/full/1686,/0/default.jpg", 
         標註: "圖片/資料來源:芝加哥藝術博物館 \n作品說明:Lunch at the Restaurant Fournaise (The Rowers’ Lunch) Date:1875"),
     藝術品資料(
         作者: "梵谷",
         標題: "作品1", 
         網址: "https://www.artic.edu/iiif/2/25c31d8d-21a4-9ea1-1d73-6a2eca4dda7e/full/1686,/0/default.jpg", 
         標註: "圖片/資料來源:芝加哥藝術博物館 \n作品說明:The BedroomDate: 1889"),
     藝術品資料(
         作者: "梵谷",
         標題: "作品2", 
         網址: "https://www.artic.edu/iiif/2/5512cee9-6d00-d01b-b0be-ac7843cc8f76/full/1686,/0/default.jpg", 
         標註: "圖片/資料來源:芝加哥藝術博物館 \n作品說明:Fishing in Spring, the Pont de Clichy (Asnières) Date:1887"),
     藝術品資料(
         作者: "梵谷",
         標題: "作品3", 
         網址: "https://www.artic.edu/iiif/2/f11bd233-6cc3-4221-59eb-f7363be4119e/full/1686,/0/default.jpg", 
         標註: "圖片/資料來源:芝加哥藝術博物館 \n作品說明:Grapes, Lemons, Pears, and Apples Date:1887"),
     藝術品資料(
         作者: "畢卡索",
         標題: "作品1", 
         網址: "https://www.artic.edu/iiif/2/c617e2f0-d5fe-0772-390e-6d8c83895815/full/843,/0/default.jpg", 
         標註: "圖片/資料來源:芝加哥藝術博物館 \n作品說明:The Red Armchair Date:December 16, 1931"),
     藝術品資料(
         作者: "畢卡索",
         標題: "作品2", 
         網址: "https://www.artic.edu/iiif/2/8a6e5b5b-7880-1b25-4bf7-621f4dae8505/full/843,/0/default.jpg", 
         標註: "圖片/資料來源:芝加哥藝術博物館 \n作品說明:Still Life Date:February 4, 1922"),
     藝術品資料(
         作者: "畢卡索",
         標題: "作品3", 
         網址: "https://www.artic.edu/iiif/2/677e4b2a-b651-1d7e-5c52-b34cb7ee40f2/full/843,/0/default.jpg", 
         標註: "圖片/資料來源:芝加哥藝術博物館 \n作品說明:Study VII for Richard J. Daley Center Sculpture (recto and verso) Date:January 28, 1964 (recto); 1964 (verso)")
  ]
  
  
  struct 圖片: View {
     let 畫作: 藝術品資料
     var body: some View {
         Text("\(畫作.作者): \(畫作.標題)")
             .font(.largeTitle)
         AsyncImage(url: URL(string: 畫作.網址)) { 下載圖片 in
             下載圖片
                 .resizable()
                 .scaledToFit()
         } placeholder: {
             ProgressView()
         }
         Text(畫作.標註)
             .font(.caption)
     }
  }
  
  struct 近代藝術家3: View {
     @State var 作者 = "莫內"
     var body: some View {
         畫家選單(name: $作者)
         let 目錄 = 藝術作品集.compactMap { item in
             item.作者 == 作者 ? item : nil
         }
         NavigationStack {
             List(目錄) { 作品 in 
                 NavigationLink(destination: 圖片(畫作: 作品)) {
                     Label("\(作品.作者): \(作品.標題)", systemImage: "photo")
                         .font(.title2)
                         .lineLimit(1)
                 } 
             }
             .navigationTitle("近代藝術家作品")
         }
     }
  }
  
  PlaygroundPage.current.setLiveView(近代藝術家3())

  程式執行結果，如下圖。

  

  

  

  現實主義：19世紀中葉

  * 米勒：https://www.artic.edu/artists/35787/jean-francois-millet

  印象派：19世紀末

  印象藝術初期(印象派)

  * 莫內：https://www.artic.edu/artists/35809/claude-monet

  * 雷諾瓦：https://www.artic.edu/artists/36351/pierre-auguste-renoir

  印象藝術後期(後印象派)

  * 梵谷：https://www.artic.edu/artists/40610/vincent-van-gogh

  現代主義藝術：20世紀至今

  立體派

  * 畢卡索：https://www.artic.edu/artists/36198/pablo-picasso