• 科技應用專題-AI與多媒體創作

SwiftUI-鳥類篇

• 講義

• 2-6a 黃山雀

  操作步驟如下:

  • 選取畫面左方的「+」號新增電子書頁面。

  

  • 將新增的電子書面頁命名為「(12)SwiftUI-6鳥類篇」。

  

  
  請前往「維基百科」網站下載「黃山雀 (https://upload.wikimedia.org/wikipedia/commons/thumb/4/47/Taiwan_tit.jpg/800px-Taiwan_tit.jpg)」的圖片，將圖片檔名取為「Taiwan_tit.jpg」。

  • 點選畫面右方的「+」號新增檔案。

  

  • 點選圖片

  

  • 在「Main」模組中撰寫程式:

  // 2-6a 黃山雀
  // Created by Philip, Heman, Jean 2021/08/15
  // Revised by Jean 2024/10/12
  import PlaygroundSupport
  import SwiftUI
  
  struct 鳥類 {
     var 中文名: String
     var 別名: String
     var 科名: String
     var 英文名: String
     var 圖片檔名: String
     var 圖片來源: String
     var 攝影者: String
  }
  
  var 黃山雀 = 鳥類(
     中文名: "黃山雀", 
     別名: "師公鳥",
     科名: "山雀科", 
     英文名: "Yellow Tit", 
     圖片檔名: "Taiwan_tit.jpg", 
     圖片來源: "https://zh.wikipedia.org/wiki/黃山雀", 
     攝影者: "Robert tdc")
  
  struct 相框: View {
     var 檔名: String
     init(_ p: String) {
         檔名 = p
     }
     var body: some View {
         Image(uiImage: UIImage(named: 檔名)!)
             .resizable()
             .scaledToFit()
     }
  }
  struct 台灣特有種: View {
     var body: some View {
         HStack {
             VStack {
                 Text(黃山雀.中文名)
                     .font(.title)
                 相框(黃山雀.圖片檔名)
             }
             VStack(alignment: .leading) {
                 Text("別名：" + 黃山雀.別名)
                 Text("科名：" + 黃山雀.科名)
                 Text("英文名稱：" + 黃山雀.英文名)
                 Text("圖片來源：" + 黃山雀.圖片來源)
                 Text("攝影者：" + 黃山雀.攝影者)
             } 
             .font(.title2)
             .lineLimit(1)
         } .frame(height: 100)
     }
  }
  
  PlaygroundPage.current.setLiveView(台灣特有種())

  • 程式執行結果，如下圖。

  

  2-6b 鳥類清單

  請前往「維基百科」網站下載「台灣山鷓鴣 (https://zh.wikipedia.org/wiki/File:Taiwan_partridge_(Arborophila_crudigularis).jpg)」的圖片，將圖片檔名取為「Taiwan_partridge.jpg」。

  請前往「維基百科」網站下載「藍腹鷴 (https://zh.wikipedia.org/wiki/File:Swinhoe%27s_Pheasant_0673.jpg)」的圖片，將圖片檔名取為「Swinhoes_Pheasant.jpg」。

  • 點選畫面右方的「+」號新增檔案。

  

  • 點選圖片

  

  • 在「Main」模組中撰寫程式:

  // 2-6b 鳥類清單
  // Created by Philip, Heman, Jean 2021/08/15
  // Revised by Jean 2024/10/12
  import PlaygroundSupport
  import SwiftUI
  
  struct 鳥類: Identifiable {
     var id: Int
     var 中文名: String
     var 別名: String
     var 科名: String
     var 英文名: String
     var 圖片檔名: String
     var 圖片來源: String
     var 攝影者: String
  }
  
  let 特有種清單 = [
     鳥類(
         id: 1,
         中文名: "黃山雀", 
         別名: "師公鳥",
         科名: "山雀科", 
         英文名: "Yellow Tit", 
         圖片檔名: "Taiwan_tit.jpg", 
         圖片來源: "https://zh.wikipedia.org/wiki/黃山雀", 
         攝影者: "Robert tdc"), 
     鳥類(
         id: 2,
         中文名: "台灣山鷓鴣", 
         別名: "深山竹雞",
         科名: "雉科", 
         英文名: "Taiwan Partridge", 
         圖片檔名: "Taiwan_partridge.jpg", 
         圖片來源: "https://zh.wikipedia.org/wiki/台湾山鹧鸪", 
         攝影者: "Francesco Veronesi"),
     鳥類(
         id: 3,
         中文名: "藍腹鷴", 
         別名: "臺灣藍鷳",
         科名: "雉科", 
         英文名: "Swinhoe's Pheasant", 
         圖片檔名: "Swinhoes_Pheasant.jpg", 
         圖片來源: "https://zh.wikipedia.org/wiki/File:Swinhoe%27s_Pheasant_0673.jpg", 
         攝影者: "")
  ]
  
  for 鳥種 in 特有種清單 {
     print(鳥種.中文名, "\t", 鳥種.英文名, "\t", 鳥種.圖片檔名, "\t", 鳥種.攝影者, "\n")
  }
  
  struct 相框: View {
     var 檔名: String
     init(_ p: String) {
         檔名 = p
     }
     var body: some View {
         if 檔名 == "" {
             Image(systemName: "camera.circle")
                 .resizable()
                 .scaledToFit()
                 .foregroundColor(.red)
                 .opacity(0.4)
         } else {
             Image(uiImage: UIImage(named: 檔名)!)
                 .resizable()
                 .scaledToFit()
         }
     }
  }
  
  struct 單項顯示: View {
     var 鳥: 鳥類
     var body: some View {
         HStack {
             VStack {
                 Text(鳥.中文名)
                     .font(.title)
                     .foregroundColor(.blue)
                 相框(鳥.圖片檔名)
                     .frame(width: 120)
             }
             VStack(alignment: .leading) {
                 Text("別名：" + 鳥.別名)
                 Text("科名：" + 鳥.科名)
                 Text("英文名稱：" + 鳥.英文名)
                 Text("圖片來源：" + 鳥.圖片來源)
                 Text("攝影者：" + 鳥.攝影者)
             } 
             .font(.title2)
             .lineLimit(1)
         } .frame(height: 100)
     }
  }
  
  struct 台灣特有種鳥類: View {
     var body: some View {
         ForEach(特有種清單) { 特有種 in
             單項顯示(鳥: 特有種)
                 .padding()
         }
     }
  }
  
  PlaygroundPage.current.setLiveView(台灣特有種鳥類())

  • 程式執行結果，如下圖。