SwiftUI ZStack佈局

xcode 13.4.1, swift 5.5, iOS 15.4

2022-08-11

SwiftUI 提供了三個佈局元件，比如HStack、VStack和ZStack，這次主要介紹ZStack佈局。

1. ZStack佈局會把每個子元件由底向上不繼疊加。

import SwiftUI

struct ZStackExample: View {
    var body: some View {
        ZStack {
            Image("boy")
                .resizable()
                .scaledToFit()
                .clipShape(Circle())
            Image(systemName: "star.fill")
                .resizable()
                .scaledToFit()
                .foregroundColor(.yellow)
                .frame(width: 100)
        }
    }
}

從上圖所看，每個ZStack的子元件都以中間線為基準來佈局。

ZStack提供了幾個基準來佈局包括：topLeading、top、topTrailing、leading、center、trailing、bottomLeading、bottom、bottomTrailing。

2. 現在使用 bottomLeading alignment來佈局，程式如下。

import SwiftUI

struct ZStackExample: View {
    var body: some View {
        ZStack(alignment: .bottomLeading) {
            Image("boy")
                .resizable()
                .scaledToFit()
                .clipShape(Circle())
            Image(systemName: "star.fill")
                .resizable()
                .scaledToFit()
                .foregroundColor(.yellow)
                .frame(width: 100)
        }
    }
}

3. 只要修改ZStack的alignemnt參數，去改變其基準的佈局就可以，下面把這3種基準都都列出來方便做對比。