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

SwiftUI-顏色篇

• 講義

• 2-5b 蘋果第一代商標(Apple LOGO)

  操作步驟如下:

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

  

  • 將新增的電子書面頁命名為「(11)SwiftUI-5顏色篇」。

  

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

  // 2-5b 七彩蘋果(Rainbow Apple)
  // Created by Philip, Heman, Jean 2021/08/11
  // Revised by Jean 2024/10/10
  // Inspired by https://twitter.com/jsngr/status/1405232521256841219
  import PlaygroundSupport
  import SwiftUI
  
  struct 蘋果: View {
     var body: some View {
         Image(systemName: "applelogo")
             .resizable()
             .scaledToFit()
     }
  }
  
  struct 七彩蘋果: View {
     var body: some View {
         VStack(spacing: 0) {
             Color.green
             Color.green
             Color.green
             Color.yellow
             Color.orange
             Color.red
             Color.purple
             Color.blue
         } 
         .frame(height: 400)
         .mask(蘋果())
         .padding()
     }
  }
  
  PlaygroundPage.current.setLiveView(七彩蘋果())

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

  

  2-5a 顏色(Color)

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

  // 2-5a 顏色(Color)
  // Created by Philip, Heman, Jean 2021/08/10
  // Revised by Jean 2024/10/10
  import PlaygroundSupport
  import SwiftUI
  
  struct 橫七彩: View {
     var body: some View {
         VStack {
             Color.red
             Color.orange
             Color.yellow
             Color.green
             Color.blue
             Color.pink
             Color.purple
             Color.white
             Color.gray
             Color.black
         }
     }
  }
  
  struct 豎七彩: View {
     var body: some View {
         HStack {
             Color.red
             Color.orange
             Color.yellow
             Color.green
             Color.blue
             Color.pink
             Color.purple
             Color.white
             Color.gray
             Color.black
         }
     }
  }
  let 蒂芬尼藍 = Color(red: 0.506, green: 0.847, blue: 0.816)
  struct 七彩: View {
     var body: some View {
         VStack {
             豎七彩()
                 .padding()
             橫七彩()
                 .padding()
         } .background(蒂芬尼藍)
     }
  }
  
  PlaygroundPage.current.setLiveView(七彩())

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