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

SwiftUI-列表篇

• 講義

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

  2-9a SF Symbols 3 (LazyVGrid)

  操作步驟如下:

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

  

  • 將新增的電子書面頁命名為「(15)SwiftUI-9列表篇」。

  

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

  

  • 點選檔案

  

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

  // 2-9a SF Symbols 3 (LazyVGrid)
  // Created by Philip, Heman, Jean 2021/08/21
  // Revised by Jean 2024/10/31
  import PlaygroundSupport
  import SwiftUI
  
  func 傑森解碼器(_ 檔名: String) -> [String]? {
     if let 檔案 = Bundle.main.url(forResource: 檔名, withExtension: "") {
         do {
             let 資料 = try Data(contentsOf: 檔案)
             let 結果 = try JSONDecoder().decode([String].self, from: 資料)
             return 結果
         } catch {
             print("error:\(error)")
         }
     }
     return nil
  }
  
  let 系統圖示集 = 傑森解碼器("sfsymbols3.json") ?? []
  let 欄位 = [GridItem(.adaptive(minimum: 40))]
  var 編號 = 0
  for 名稱 in 系統圖示集 {
     編號 = 編號 + 1
     print(編號, 名稱)
  }
  
  struct 顯示系統圖示: View {
     var body: some View {
         VStack {
             Rectangle()
                 .frame(height: 60)
                 .foregroundColor(.orange)
                 .overlay(Label("[雪]Swift程式設計", systemImage: "swift")
                             .font(.largeTitle)
                             .foregroundColor(.white))
             ScrollView {
                 LazyVGrid(columns: 欄位) {
                     ForEach(系統圖示集, id: \.self) { 名稱 in
                         Image(systemName: 名稱)
                             .font(.largeTitle)
                             .foregroundColor(.blue)
                     }
                 } 
             }
         }
     }
  }
  PlaygroundPage.current.setLiveView(顯示系統圖示())

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

  

  2-9b SF Symbols 3 (List)

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

  // 2-9b SF Symbols 3 (List)
  // Created by Philip, Heman, Jean 2021/08/21
  // Revised by Jean 2024/10/31
  import PlaygroundSupport
  import SwiftUI
  
  func 傑森解碼器(_ 檔名: String) -> [String]? {
     if let 檔案 = Bundle.main.url(forResource: 檔名, withExtension: "") {
         do {
             let 資料 = try Data(contentsOf: 檔案)
             let 結果 = try JSONDecoder().decode([String].self, from: 資料)
             return 結果
         } catch {
             print("error:\(error)")
         }
     }
     return nil
  }
  
  let 系統圖示集 = 傑森解碼器("sfsymbols3.json") ?? []
  struct 顯示系統圖示: View {
     var body: some View {
         VStack {
             Rectangle()
                 .frame(height: 60)
                 .foregroundColor(.orange)
                 .overlay(Label("[雪]Swift程式設計", systemImage: "swift")
                             .font(.largeTitle)
                             .foregroundColor(.white))
             List(系統圖示集, id: \.self) { 名稱 in
                 Label(名稱, systemImage: 名稱)
                     .font(.title)
                     .foregroundColor(.blue)
                     .lineLimit(1)   
             }
         }
     }
  }
  PlaygroundPage.current.setLiveView(顯示系統圖示())

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