Today Preview

1. 正文

前幾天介紹的List是一維列表
而今天要介紹的二維表格是使用LazyVGrid(垂直) or LazyHGrid(水平)
LazyVGrid 跟 LazyHGrid 是完全一樣的東西，只是差在方向而已
所以今天就只以LazyVGrid當範例
LazyVGrid其中的Lazy，雖然我沒有特別查，但應該是指其中的item不會一次產生完，而是要顯示的時候才會拿之前已經建立的item回收利用

1.1 GridItem.Size

而講到Grid，最重要的就是它其中的item怎麼排列
這個部分跟Flutter的GridView概念是類似的(不用自己去算長寬)☘️☘️☘️
是透過GridItem這個型別裡的size屬性去設定
它雖然叫size，但它其實是個enum，有以下三種，預設flexible

fixed: 就是固定寬度

//[GridItem(.fixed(200))]
可以看到固定寬度下，不同大小螢幕的手機都是一排(就算空間足夠)

adaptive: 不小於min的條件下，盡可能多一點 = 不同裝置結果不同

//[GridItem(.adaptive(minimum: 200))]
可以看到雖然設定200, 但200是最小, 由於390不夠200*2, 所以它就把空間全部給一個item了(自動模式, 不同螢幕可能會有不同結果)
(像是Flutter的SliverGridDelegateWithMaxCrossAxisExtent☘️☘️☘️)

flexible: 控制排數

//[GridItem(.flexible(minimum: 200)), GridItem(.flexible(minimum: 200))]
在adaptive我們可以看到，雖然array裡只給了一個GridItem，但它還是有可能兩排，而flexible則是給幾個GridItem就是幾排
(像是Flutter的SliverGridDelegateWithFixedCrossAxisCount☘️☘️☘️)

1.2 alignment

水平對齊

不同的GridItem.Size也會影響對齊效果，可以看到雖然都是水平置中，但fixed vs flexible的效果並不一樣

若有提供多個GridItem，則可以做到分散對齊的效果

垂直對齊

剛剛的水平對齊是在LazyVGrid的alignment屬性上設定
若是要調整垂直方向的對齊，則是在GridItem上設定
下圖是垂直置中跟垂直對上

1.3 code

1.

把可調的因子都列成@State
並把safearea上色
顯示各種螢幕尺寸的寬度在畫面最上方

2.

LazyVGrid本體
記得外面要再包一層ScrollView
pinnedViews可以決定section要不要有黏貼(sticky)效果(List好像就沒有這招...)
然後SwiftUI有個很奇怪的Bug現象
就是只要是滾動類的都會無視safearea滾到外面去(醜死了...)
小撇步加個.padding(.vertical, 0.1)吧

3.

控件們。
這些前面的集數都有提到(快回去衝點閱數)
然後趁機抱怨
SwiftUI是寫得滿爽的沒錯
但是又要來呼應第一集
畫面控制性不足
心血來潮想調個Segment的膠囊顏色
一查竟然又叫我用UIKit[1][2]
真的很吐血
這應該就是我最care的一點
SwiftUI哪天可以不用UIAppearance我才有辦法真心推薦

4.

根據State取得gridItems 跟 alignment 餵給畫面
這裡就必須稱讚一下Swift(賞罰分明)
可以把兩個enum組合在一個switch裡面真是方便
最愛Swift的enum相關特性了❤️

2. 雜七雜八

1.

跟alignment一樣的概念
LazyVGrid上的spacing是垂直間隔
GridItem上的是水平間隔

2.

如果GridItem沒控好
例如fixed時給的數量太多 或是flexible時minimum太大
可能會有以下畫面寬度不足被撐開破版的情況

3.

我寫SwiftUI到目前為止
只有寫這頁的時候超卡
Preview超慢，曾經build到死機

慢就算了
竟然還出天殺的干擾魔力

auto complete失效
連打.init都沒東西出來
對於我這個沒有選擇就不會寫扣的人極度痛苦

4.

推薦一下彼得潘老師的這篇文章，我覺得寫得滿清楚的

5.

最後用個抱怨結束這天
後來想在控制區裡面加個LazyVGrid alignment
本來想直接把HorizontalAlignment當成State
但後來發現它根本不是enum
我不懂這種東西就是enum幹嘛不寫成enum
然後我要用在Picker上時又噴錯
Generic struct 'Picker' requires that 'HorizontalAlignment' conform to 'Hashable'
就leading, center, trailing三種你也分不出來？
最後只好寫了這種東西...

3. 對照表

Tomorrow Preview

跨界學習系列文章

Flutter版：iOS Developer Learning Flutter. Lesson14 網格

https://github.com/mark33699/FDLS