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

SwiftUI-表情篇

• 講義

• "emoji.json"檔案下載網址：https://joc.url.tw/Swift36/emoji.json

  2-8a Emoji

  操作步驟如下:

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

  

  • 將新增的電子書面頁命名為「(14)SwiftUI-8表情篇」。

  

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

  

  • 點選檔案

  

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

  // 2-8a Emoji
  // Created by Philip, Heman, Jean 2021/08/19
  // Revised by Jean 2024/10/31
  import Foundation
  
  struct 表情符號: Codable {
     var codes: String
     var char: String
     var name: String
     var category: String
     var group: String
     var subgroup: String
  }
  
  func 傑森解碼器(_ 檔名: String) -> [表情符號]? {
     if let 檔案 = Bundle.main.url(forResource: 檔名, withExtension: "") {
         do {
             let 資料 = try Data(contentsOf: 檔案)
             let 結果 = try JSONDecoder().decode([表情符號].self, from: 資料)
             return 結果
         } catch {
             print("error:\(error)")
         }
     }
     return nil
  }
  
  let 表情符號全集 = 傑森解碼器("emoji.json") ?? []
  
  var 編號 = 0
  for 字符 in 表情符號全集 {
     編號 = 編號 + 1
     print(編號, 字符.char, 字符.codes, 字符.name)
  }

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

  

  2-8b Emoji (LazyVGrid)

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

  // 2-8b Emoji (LazyVGrid)
  // Created by Philip, Heman, Jean 2021/08/19
  // Revised by Jean 2024/10/31
  import PlaygroundSupport
  import SwiftUI
  
  struct 表情符號: Codable {
     var codes: String
     var char: String
     var name: String
     var category: String
     var group: String
     var subgroup: String
  }
  
  func 傑森解碼器(_ 檔名: String) -> [表情符號]? {
     if let 檔案 = Bundle.main.url(forResource: 檔名, withExtension: "") {
         do {
             let 資料 = try Data(contentsOf: 檔案)
             let 結果 = try JSONDecoder().decode([表情符號].self, from: 資料)
             return 結果
         } catch {
             print("error:\(error)")
         }
     }
     return nil
  }
  
  let 表情符號全集 = 傑森解碼器("emoji.json") ?? []
  let 欄位 = [GridItem(.adaptive(minimum: 50))]
  
  struct 顯示表情符號: View {
     var body: some View {
         ScrollView {
             LazyVGrid(columns: 欄位) {
                 ForEach(表情符號全集, id: \.codes) {字符 in
                     Text(字符.char)
                         .font(.system(size: 48))
                 }
             }
         }
     }
  }
  PlaygroundPage.current.setLiveView(顯示表情符號())

  如果程式執行結果顯示不出來，可以試著把主控台關閉，如下圖。

  

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