寫在前面
hihi 大家好, 好久不見(有人認識我嗎?)
我又回來鐵人賽了(為什麼說又呢)
這次來學一下SwiftUI(以一個iOS Developer叛徒的身份)
根據本系列文的慣例
會拿Flutter來當對照組
盡量多加入兩邊的比較
所以應該滿適合想學SwiftUI的Flutter同學(有人走這種學習路線的嗎?)
今天是系列的第一篇文章
會包含簡介、資源、抱怨(對,你沒看錯)
根據我的鐵人賽經驗,第一篇的觀看數是最多的
所以我第一篇會盡量多寫一點
"整個"系列文章的內容裡,只要出現跟Flutter開發不一樣的狀況,就會出現三個注意符號⚠️⚠️⚠️
相對的,只要出現可以類比的情況,就會顯示三個幸運符號☘️☘️☘️
所有的source code都在這邊
使用的環境如下
Today Preview
1. 簡介
Hello World
第一集會先假設讀者都是沒開發過iOS的朋友
會稍微講古一下
若是iOS經驗者,按讚之後就可以看下一集了謝謝XD
首先,iOS的開發工具是Xcode
光是Xcode安裝就很多學問了
第一個門檻就是要買Mac,不像Flutter用的VSCode或AS都可以用windows開發⚠️⚠️⚠️
然後Xcode的安裝是很多雷的
直接講結論:不要用Mac App Store安裝, 請用Xcodes(詳請請見:很可怕不要點)
-
可以看到這畫面恭喜您進入新手村,點Create a new Xcode project
-
選第一個準沒錯
-
專案名字大小寫符號隨便你取⚠️⚠️⚠️,甚至還可以取中文多好啊XDD
Flutter Developer Learning SwiftUI a.k.a FDLS
-
以前在iOS界最有名的頂上戰爭就是怎麼刻畫面
其中的兩大派就是IB(Interface Builder)跟programmatically
而IB又分成Storyboard跟xib
但上述說的三種都是使用UIKit這個框架
而SwiftUI則是全新的框架
PS. 根據我的不客觀觀察,用IB會被鄙視喔XDDD
-
全新專案的樣子
乾乾淨淨的,不像Flutter會給你一個小範例⚠️⚠️⚠️
在source code右邊有斜條紋的區域就是預覽區
也就是SwiftUI的最最最大賣點
上述所說到的三種UIKit方式都不支援即時預覽
也就造成iOS Developer在開發時很大的不便
一定要app跑起來
又不能Hot reload⚠️⚠️⚠️(雖然我都用Injection)
更不像隔壁棚Android用AS的畫面編輯器可以馬上看到結果,UI code還乾淨一百萬倍(要不要這麼誇張)
難怪人家不會吵UI怎麼刻
所以這次Apple出SwiftUI,有想要讓江湖統一的感覺
總之先點右上角的"resume"上畫面出現看看(第一次跑會很久,可以先按左上角執行再preview)
-
然後就可以看到Hello World了(右邊是模擬器)
不過我要開始我的第一個抱怨,為什麼第一個View要叫ContentView???
哪個View沒有Content?這不是廢話嗎?
叫RootView或MainView不是很好嗎?(瘋狂碎念)
然後我們稍微冷靜之後來看一下程式碼
首先一個SwiftUI file分成兩個部分
上半部是這個View的本體
下半部是這個View的預覽
先談談本體的部分:
- SwiftUI所有的View都是struct,皆conform "View"這個protocol
所以跟UIKit之前走繼承的老路子不同
- 裡面有個body的屬性,是一個some View
some什麼some? 我也還不清楚,先不管他
總之,這邊跟以前的build function是一樣的用途☘️☘️☘️,UI code放裡面就對了
- SwiftUI預設都是對齊中間的,跟UIKit&Flutter都不一樣⚠️⚠️⚠️,這點我也不太習慣
- Swift的字串"一定"要用雙引號,不像Flutter單雙皆宜⚠️⚠️⚠️
- 可以看到第13行有個.padding(),點xxx點yyy這東西叫做"modifier"
再來是Preview的部分,前面說過Preview是SwiftUI最大的賣點,以下有打星號✨的部分是我覺很讚的特色
Preview的上方有一排工具列:
- 這是最常用的,可以讓Preview執行起來✨,就不用跑在模擬器上了
而且我本來以為是只能run當前頁面,沒想到還可以跳頁,目前用起來還原程度很高,只有發現無法print 跟 無法顯示鍵盤
若沒有執行的話,就會根據左邊程式碼的游標或右邊畫面上滑鼠選中,將元件用橘框顯示。
講個笑話,我第一次看到的時候還疑惑超久,我明明就沒寫要加框的code,為什麼會有框???
- 可以接線在手機上,在手機上跑Preview,就可以做到hot reload的效果
- 旋轉Preview螢幕的方向
- 顯示Preview可用的modifier,其中切換機型跟深色模式是比較常用的✨,尤其是機型,可以用選的,不用自己再手敲型號 eg: .previewDevice("iPad mini (6th generation)")
- 可以一次顯示多個Preview✨,就可以拿來顯示常用的幾個機型,或做淺色/深色模式的對照
還可以點左下角pin,將最常用的畫面置頂,這樣不管切到哪個SwiftUI file都能看到
但如果將Preview執行起來,就只能看到一個畫面
- 最後有一點很重要的是
SwiftUI還是一個很不穩定新的框架,每一代都改很大
前幾代雷更是遍地開花,那些嚐鮮勇者哀嚎遍野
所以我們要把標準提高,請根據下圖將專案的最低支援系統版本從預設的iOS14改為iOS15
SwiftUI小檔案
- 於2019的WWDC發布,現今邁入第四年(比Flutter年輕一歲)
history:
SwiftUI 1 |
SwiftUI 2 |
SwiftUI 3 |
SwiftUI 4 |
Xcode11 |
Xcode12 |
Xcode13 |
Xcode14 |
iOS13 |
iOS14 |
iOS15 |
iOS16 |
- 採用聲明式編程(declarative programming),與Flutter一致☘️☘️☘️
- 也是跨平台的開發框架☘️☘️☘️,可同時開發Apple系列上多個平台的app,不需分別寫AppKit跟UIKit
- 對於老iOS人而言:
- 已經沒有ViewController了(哭哭)時代的眼淚
- 也沒有UIXxx了,萬物皆是struct做的View (雖然好像有些底層還是用UIKit)
- 更沒有AppDelegate了,由@main做為程式進入點
- 對於Flutter guy而言
- 雖然都是用State驅動畫面,但沒有分為stateful跟stateless⚠️⚠️⚠️
- 程式碼看起來比較簡潔
- 不用寫return
- 使用modifier會減少括號的數量(波動拳會小一點)
- 可以變動的彈性較低,Flutter的Widget就是比較開放,怎麼調整都可以,但SwiftUI總是有實現不了的部分。然後這種問題是源自於SwiftUI的便利,很多東西他都幫你弄好好,但app不可能是我們自己說了算,一定要照設計稿,如果無法100%可控,就會很麻煩。例如inline picker in list,我label明明就是給小寫,你沒事幫我轉大寫幹嘛?這樣我不是還要花時間去查怎麼改回來?然後還找不到怎麼改= =
- 不像Flutter有這麼多種Widget⚠️⚠️⚠️,有很多需求可能要自己刻
- build到手機上可以一直用,不用特地選什麼profile mode⚠️⚠️⚠️
- 隨時下中斷點都會停下來,run app不用分是不是debug mode⚠️⚠️⚠️
- 不用import來import去⚠️⚠️⚠️,專案內的檔案都互相認識
2. 資源
中文區
- 首推SwiftUI傳教士(給人家亂講)13的Apple開發者電子報之SwiftUI專欄
- 一樣是13的SwiftUI tips on twitter (請搭配weak self第93集服用)
-
weak self discord裡有個SwiftUI頻道可以跟大家討論
-
喵神的書應該是中文書裡最優質的
-
肘子的Swift记事本內容干貨滿滿~
他最近也寫了一篇介紹教學資源的文章,請見
-
Youtube: ChaoCode Channel講得非常清楚簡單明瞭(聲音又好聽),可惜SwiftUI的影片較少
- 彼得潘老師深耕iOS教學多年,其SwiftUI的相關文章是最適合入門的
-
AppCoda也是一個教學文章的寶庫
英文區
- Hacking with Swift的100 Days of SwiftUI(影片)基本上就是英文學習資源的首選了,內容又多又紮實,能跑完的都很強了
- 官方一定是最權威的
-
文件
-
SwiftUI with Xcode
-
tutorials
-
概念
-
Sample
-
Youtube: Swiftful Thinking Channel
-
Swift by Sundell帶你有組織地了解SwiftUI
-
壞壞網站XD
- 剩下的我就沒看了,但看起來資源也很豐富,且持續更新,不妨參考
-
https://swiftui-lab.com/category/swiftui/
-
https://nilcoalescing.com/tags/swiftui/
-
https://sarunw.com/tags/swiftui/
-
https://www.avanderlee.com/category/swiftui/
3. 抱怨
- initializer的auto complete無法選擇屬性
剛回來寫SwiftUI的時候,這是最不能接受的一點
例如.frame我只想要maxWidth,這時按下Enter
他就會整個function一卡車帶出來...天吶...(就算他們都是nullable)
等於我就要所有字母自己打完
不像Flutter可以選擇自己想要的屬性⚠️⚠️⚠️(還可以順序不拘⚠️⚠️⚠️)
- 查不到source code的定義
應該是Apple沒有open source的關係
常常要jump to definition的時候都會被問號打槍
我才黑人問號勒???
- 有時用initializer,有時候用modifier
不像Flutter所有東西都是用建構子⚠️⚠️⚠️
這樣造成學習上的混亂,要去記哪些東西在哪裡(然後每個View各自的initializer又超多種...)
持 續 更 新 中...
寫在後面
寫到目前為止,我還是比較喜歡Flutter哈哈哈(雖然我是寫iOS起家的)
但SwiftUI的進步是有目共睹的
更何況他是Apple的親兒子,還是有一定的優勢
不過UIKit還能撐個三年沒問題
所以讓我排序的話我會排Flutter > UIKit > SwiftUI
總之
老闆叫我們寫什麼我們就寫XD
Tomorrow Preview
跨界學習系列文章
Android版:iOS Developer Learning Android. Lesson 02 - Hello World (把App裝到你的安卓手機上)
Flutter版:iOS Developer Learning Flutter. Lesson1 依然哈囉
https://github.com/mark33699/FDLS