Today Preview

1. 正文

今天的主題是排列
排列就是佈局的基礎
「不是決定元件要放在畫面的哪裡，而是將畫面分割成若干部分」
SwiftUI這點跟Flutter是一樣的☘️☘️☘️

其實排列不外乎就是重疊或不重疊
不重疊的話要嘛直的要嘛橫的
所以就是ZStack VStack HStack
Demo首先呈現VStack的各種效果
然後示範重疊除了ZStack還可以用.overlay這個Modifier

以下幾點跟Flutter有不小差異⚠️⚠️⚠️，需要注意一下

1. alignment只能設定交叉方向的
2. alignment只有center leading trailing三種可選(還要滿足特定情況才會生效, 請見"VStack alignment is still trailing", VStack的寬度明明這麼寬, 卻還是要塞在中間)
3. Stack是用一種叫做ViewBuilder的東西來裝subView(children)的，這東西跟Flutter的builder滿像的☘️☘️☘️，可以在裡面寫條件判斷
   但要注意，他是不用寫return的，所以不管怎樣，只要是View，就會被裝進去，例如：

VStack {
  if true {
    Text("真")
  }
  Text("假")
}

不管怎樣一定會顯示「假」，不要想成：遇到「真」就return掉了。請寫成：

VStack {
  if true { //當然也可以寫成三元運算
    Text("真")
  } else {
    Text("假")
  }
}

4. 由於ViewBuilder不是Array，他竟然有數量的限制= =
   超過10個就會報錯了(以前還只能6個勒)
   怎麼辦？
   再用ViewBuilder包起來囉～囧

2. safe area 不 safe

1. 基本上SwiftUI預設就是在SafeArea裡的
   

2. 但只要是.background就會出界(搭配VStack很容易遇到)
   

3. 解法之一(道理不明)
   

4. 解法之二(好吧比較make sense...)
   

3. Tips

以前在AS只要按option + enter就會出現智慧小燈泡選單
可以很方便的把Widget包進去

SwiftUI一樣的東西叫做code action，command+shift+a就可以召喚出來
只是無法選取多行然後一次包進去，有點可惜...

4. 對照表

Tomorrow Preview

跨界學習系列文章

Android版：iOS Developer Learning Android. Lesson 07 - Layout (就是UI排列的規則)
Flutter版：iOS Developer Learning Flutter. Lesson4 畫面佈局

https://github.com/mark33699/FDLS