SwiftUI 沒有 View

因為工作關係已經使用SwiftUI有幾個月了，和過去使用xib / storyboard有著很多的不同，連都思考方式都要有所改變，很有趣也很困擾，過去很容易完成的UI，SwiftUI 變得有點麻煩，但也有很多過去很麻煩的在 SwiftUI 得很容易。

SwiftUI 並沒有可以使用 xib 或 storyboard 可以直接看排版，也不能把元件拉到畫面上，是要寫Code 與 Preview才能看到排版結果，說老實話Preview這個功能真的很好用，雖然機器不夠好會跑不動，但是用習慣了之後就會覺得它很好用，之後有機會再介紹 Preview

這次是「沒有系列第一篇」要說的是SwiftUI 沒有 View，正確來說是SwiftUI 並沒有像UIKit一樣有一個叫做UIView的元件，取而代之的是ZStack 、VStack、 HStack，這讓很習慣使用UIView做各種排版的我在初期使用上十分困擾。

ZStack 、VStack、 HStack的特性

首先 ZStack 、VStack、 HStack都是一種View 且各有不同的特性，過去很常使用UIKit的Stack進行排版的話，就比較容易理解，ZStack 、VStack、 HStack的預設都是置中對齊，並非左上角。

VStack 會讓元件從上到下直向排列

VStack {
    Circle()
        .frame(width: 30, height: 30)
        .foregroundColor(.red)

    Circle()
        .frame(width: 30, height: 30)
        .foregroundColor(.yellow)
    
    Circle()
        .frame(width: 30, height: 30)
        .foregroundColor(.green)
}

HStack就是從左到右橫向排列

HStack {
    Circle()
        .frame(width: 30, height: 30)
        .foregroundColor(.red)

    Circle()
        .frame(width: 30, height: 30)
        .foregroundColor(.yellow)
    
    Circle()
        .frame(width: 30, height: 30)
        .foregroundColor(.green)
}

ZStack 它是讓元件依 Z 軸由下至上疊起，這會使元件擁有前後關係

ZStack {
    Circle()
        .frame(width: 30, height: 30)
        .foregroundColor(.red)

    Circle()
        .frame(width: 30, height: 30)
        .foregroundColor(.yellow)
    
    Circle()
        .frame(width: 30, height: 30)
        .foregroundColor(.green)
}

把上面的程式改一下，將紅色圈圈和黃色圈圈加上Y軸的位移，可以看到紅色圈圈會在最底下，黃色圈圈在中間，綠色圈圈在最上面

ZStack {
    Circle()
        .frame(width: 30, height: 30)
        .foregroundColor(.red)
        .offset(y: 20)

    Circle()
        .frame(width: 30, height: 30)
        .foregroundColor(.yellow)
        .offset(y: 10)
    
    Circle()
        .frame(width: 30, height: 30)
        .foregroundColor(.green)
}

在使用UIKit的時候想要讓二個View 有前後關係一般會在View裡再疊一個View，而只要是寫在ZStack裡的元件就會自動擁有這樣的關係

UI畫面的思考方式

基本上 UI畫面都是靠這三個Stack組合來排版

過去看到UI畫面的時候會最先思考的可能是
* 需要使用什麼元件?
* 元件之間Autolayout怎麼設定?
* 有需要再加個UIView嗎?
* 可以使用Stack嗎?

現在會最先思考變成是
* 要怎麼分區?
* 有需要ZStack嗎?
* 用VStack? HStack? 需要二者組合嗎?

所以一開始在使用SwiftUI的時候其實很不習慣，過去的思考方式不適用於SwiftUI, 但習慣用SwiftUI之後，現在反而很不習慣UIKit了…