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

SwiftUI-版面篇

• 講義

• 在上二堂課完成了文字和圖片的使用後，這堂課我們要將這二個技術結合在同一個版面中，透過文字和圖片互相陪襯，讓版面呈現豐富多樣的樣貌，讓文字和圖片可以相得益彰，最後達到圖文並茂的效果。

  操作步驟如下:

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

  

  • 將新增的電子書面頁命名為「(09)SwiftUI-3版面篇」。

  

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

  // 2-3 圖文並茂
  // Created by Philip, Heman, Jean, 2021/08/07
  // Revised by Jean 2024/10/06
  import PlaygroundSupport
  import SwiftUI
  
  struct 標示: View {
     var 標語: String
     init(_ p: String) { 標語 = p }
     var body: some View {
         Text(標語)
             .font(.system(size: 28))
             .multilineTextAlignment(.center)
             .shadow(color: .yellow, radius: 2, x: 0, y: 0)
             .blur(radius: 1)
     }
  }
  
  struct 相框: View {
     var 檔名: String
     init(_ p: String) { 檔名 = p }
     var body: some View {
         Image(uiImage: UIImage(named: 檔名)!)
             .resizable()
             .scaledToFit()
             .cornerRadius(20)
             .shadow(color: .gray, radius: 2, x: 5, y: 5)
             .padding()
     }
  }
  
  struct 版面: View {
     var body: some View {
         VStack {
             HStack {
                 標示("我的名字叫瑪麗")
                     .padding()
                 相框("girl.png")
             }
             HStack {
                 相框("boy.png")
                 標示("我的名字叫湯姆")
                     .padding()
             } 
         }
     }
  }
  PlaygroundPage.current.setLiveView(版面())

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