Flutter Developer Learning SwiftUI. @State var lesson1 = "Hello World"

2022 iThome 鐵人賽

DAY 1

Mobile Development

Flutter Developer Learning SwiftUI系列第 1 篇

14th鐵人賽 swiftui flutter ios swift

MarkFly～

2022-09-16 00:53:17

1353 瀏覽

分享至

寫在前面

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的預覽
先談談本體的部分：
1. SwiftUI所有的View都是struct，皆conform "View"這個protocol
  所以跟UIKit之前走繼承的老路子不同
2. 裡面有個body的屬性，是一個some View
  some什麼some? 我也還不清楚，先不管他
  總之，這邊跟以前的build function是一樣的用途☘️☘️☘️，UI code放裡面就對了
3. SwiftUI預設都是對齊中間的，跟UIKit&Flutter都不一樣⚠️⚠️⚠️，這點我也不太習慣
4. Swift的字串"一定"要用雙引號，不像Flutter單雙皆宜⚠️⚠️⚠️
5. 可以看到第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人而言：
1. 已經沒有ViewController了(哭哭)時代的眼淚
2. 也沒有UIXxx了，萬物皆是struct做的View (雖然好像有些底層還是用UIKit)
3. 更沒有AppDelegate了，由@main做為程式進入點
對於Flutter guy而言
1. 雖然都是用State驅動畫面，但沒有分為stateful跟stateless⚠️⚠️⚠️
2. 程式碼看起來比較簡潔
  1. 不用寫return
  2. 使用modifier會減少括號的數量(波動拳會小一點)
3. 可以變動的彈性較低，Flutter的Widget就是比較開放，怎麼調整都可以，但SwiftUI總是有實現不了的部分。然後這種問題是源自於SwiftUI的便利，很多東西他都幫你弄好好，但app不可能是我們自己說了算，一定要照設計稿，如果無法100%可控，就會很麻煩。例如inline picker in list，我label明明就是給小寫，你沒事幫我轉大寫幹嘛？這樣我不是還要花時間去查怎麼改回來？然後還找不到怎麼改= =
4. 不像Flutter有這麼多種Widget⚠️⚠️⚠️，有很多需求可能要自己刻
5. build到手機上可以一直用，不用特地選什麼profile mode⚠️⚠️⚠️
6. 隨時下中斷點都會停下來，run app不用分是不是debug mode⚠️⚠️⚠️
7. 不用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(影片)基本上就是英文學習資源的首選了，內容又多又紮實，能跑完的都很強了
官方一定是最權威的
1. 文件
2. SwiftUI with Xcode
3. tutorials
4. 概念
5. Sample
Youtube: Swiftful Thinking Channel
Swift by Sundell帶你有組織地了解SwiftUI
壞壞網站XD
剩下的我就沒看了，但看起來資源也很豐富，且持續更新，不妨參考

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