線上教室

SwiftUI-圖層篇

講義

自動對齊

當我們使用 VStack/HStack/ZStack 時，包在其中的 View 物件會自動置中排列，不過三者的中軸線不同，示意圖如下：

若是要 VStack 改成向右對齊或向左對齊，或是 HStack 向上方對齊或下方對齊，則需手動給參數，對齊的參數值如下圖。這些名稱也適用於 SwiftUI 其他需要對齊的物件。

ZStack 比較特別，除了對齊四個方向之外，四個角落也可用來對齊，所以總共有9種對齊方式。

VStack/HStack 除了手動對齊(alignment)的參數之外，還有一個調整「間距」(spacing)的參數（ZStack沒有spacing參數），範例2-4b顯示文字 Text 物件的預設字體大小，垂直排列向左對齊，上下間距20點。

【範例】

操作步驟如下:

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

將新增的電子書面頁命名為「(10)SwiftUI-2圖層篇」。

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

// 2-4a 圖層(ZStack)
// Created by Philip, Heman, Jean 2021/08/08
// Revised by Jean 2024/10/10
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()
               ZStack {
                   相框("photo_frame.png")
                   相框("girl.png")
                       .scaleEffect(0.8)
               }
           }
           HStack {
               ZStack {
                   相框("photo_frame.png")
                   相框("boy.png")
                       .scaleEffect(0.8)
               }
               標示("我的名字叫湯姆")
                   .padding()
           } 
       }
   }
}
PlaygroundPage.current.setLiveView(版面())

程式執行結果，如下圖。

手動對齊

【示範圖片】

圖片來源: openclipart

本單元採用的方法是先將圖片檔案準備好在筆電的本機中，然後在 Swift Playgrounds 將圖片檔案匯入，接用 Swift 程式去讀取圖片。匯入圖片的操作過程，如下圖。

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

點選圖片

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

// 2-4b 手動對齊
// Created by Philip, Heman, Jean 2021/08/09
// Revised by Jean 2024/10/10
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(alignment: .top) {    // 手對對齊：頂端
               標示("我的名字叫瑪麗")
                   .padding()
               ZStack {
                   相框("photo_frame.png")
                   相框("girl.png")
                       .scaleEffect(0.7)
               }
           }
           HStack {
               ZStack {
                   相框("photo_frame.png")
                   相框("boy.png")
                       .scaleEffect(0.7)
               }
               標示("我的名字叫湯姆")
                   .padding()
           } 
           HStack(alignment: .bottom) {    // 手對對齊：底端
               標示("我的名字叫傑克")
                   .padding()
               ZStack {
                   相框("photo_frame.png")
                   相框("boy2.png")
                       .scaleEffect(0.7)
               }
           } 
       }
   }
}
PlaygroundPage.current.setLiveView(版面())

程式執行結果，如下圖。

【補充說明】

SwiftUI 字體大小的預設值，例如 .largeTitle, .title 等等，大小值在不同設備可能是不一樣的，系統會根據螢幕解析度去設定，也就是說，從65寸Apple TV、21寸iMac、13寸Macbook、10寸 iPad、6寸iPhone、到3寸的Apple Watch，看到的 .largeTitle 未必是同樣大小，但都是相對的「大標」尺寸。

也就是說，如果手動設定字體大小，例如 font(.system(size: 40))，可能在 Macbook 看起來很合適，但是在 iPhone 卻太大，影響整個版面的協調，若使用預設的字體大小，在跨不同設備時就比較沒有問題。