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

SwiftUI-綜合篇

• 講義

• 2-10a Fade-in Fade-out

  操作步驟如下:

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

  

  • 將新增的電子書面頁命名為「(16)SwiftUI-10綜合篇」。

  

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

  // 2-10a Fade-in Fade-out
  // Created by Philip, Heman, Jean 2021/08/25
  // Revised by Jean 2024/11/01
  import PlaygroundSupport
  import SwiftUI
  
  struct 相框: View {
     var 檔名: String
     init(_ p: String) { 檔名 = p }
     var body: some View {
         Image(uiImage: UIImage(named: 檔名)!)
             .resizable()
             .scaledToFit()
             .cornerRadius(20)
     }
  }
  
  struct 淡出淡入: View {
     @State var 淡出 = true
     var body: some View {
         ZStack(alignment: .top) {
             相框("photo_frame.png")
                 .scaleEffect(0.8)
             相框("girl.png")
                 .opacity(淡出 ? 0.0 : 1.0)
                 .animation(.easeInOut(duration: 1.2))
                 .scaleEffect(0.5)
             Text("請點任何地方")
                 .font(.title2)
                 .foregroundColor(.orange)
                 .shadow(color: .white, radius: 2, x: 0, y: 0)
         }
         .onTapGesture {
             淡出.toggle()
         }
     }
  }
  
  PlaygroundPage.current.setLiveView(淡出淡入())

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

  

  2-10b SF Symbols 3 (TapGesture)

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

  // 2-10b SF Symbols 3 (TapGesture)
  // Created by Philip, Heman, Jean 2021/08/25
  // Revised by Jean 2024/11/01
  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: 50))]
  
  struct 圖示: View {
     @State var 點選 = false
     var 圖示名稱: String
     init(_ p: String) { 圖示名稱 = p }
     var body: some View {
         Image(systemName: 圖示名稱)
             .resizable()
             .scaledToFit()
             .foregroundColor(點選 ? .orange : .primary)
             .offset(y: 點選 ? -2 : 0)
             .frame(width: 50)
             .onTapGesture {
                 點選.toggle()
             }
     }
  }
  
  struct 顯示系統圖示: View {
     var body: some View {
         VStack {
             Rectangle()
                 .frame(height: 60)
                 .foregroundColor(.orange)
                 .overlay(Label("[雪]Pick and Choose", systemImage: "swift")
                             .font(.largeTitle)
                             .foregroundColor(.white))
             ScrollView {
                 LazyVGrid(columns: 欄位) {
                     ForEach(系統圖示集, id: \.self) { 名稱 in
                         圖示(名稱)
                     }
                 } 
             }
         }
     }
  }
  PlaygroundPage.current.setLiveView(顯示系統圖示())

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

  

  
  2-10c Emoji (TapGesture)

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

  // 2-10c Emoji (TapGesture)
  // Created by Philip, Heman, Jean 2021/08/26
  // Revised by Jean 2024/11/01
  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") ?? []
  
  struct 顯示表情: View {
     @State var 點選 = false
     @State var 放大 = false
     private var 符號: 表情符號
     init(_ p: 表情符號) { 符號 = p }
     var body: some View {
         HStack {
             Text(符號.char)
                 .font(.system(size: 放大 ? 96 : 36))
             VStack(alignment: .leading) {
                 Text(符號.category)
                 Text(符號.name)
             }
             .lineLimit(1)
             .font(放大 ? .title : .title2)
             .foregroundColor(點選 ? .orange : .primary)
         }
         .onTapGesture(count: 2) {
             UIPasteboard.general.string = 符號.char
             放大.toggle()
         }
         .onTapGesture {
             點選.toggle()
         }
     }
  }
  
  struct 顯示表情符號: View {
     var body: some View {
         VStack {
             Rectangle()
                 .frame(height: 60)
                 .foregroundColor(.orange)
                 .overlay(Label("[雪]Tap Tap, Once and Twice", systemImage: "swift")
                             .font(.largeTitle)
                             .foregroundColor(.white))
             List(表情符號全集, id: \.codes) {字符 in
                 顯示表情(字符)
             }
         }
     }
  }
  PlaygroundPage.current.setLiveView(顯示表情符號())

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