iT邦幫忙

2022 iThome 鐵人賽

DAY 1
1
Mobile Development

Flutter Developer Learning SwiftUI系列 第 1

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

  • 分享至 

  • xImage
  •  

寫在前面

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的上方有一排工具列:

  1. 這是最常用的,可以讓Preview執行起來✨,就不用跑在模擬器上了
    而且我本來以為是只能run當前頁面,沒想到還可以跳頁,目前用起來還原程度很高,只有發現無法print 跟 無法顯示鍵盤
    若沒有執行的話,就會根據左邊程式碼的游標或右邊畫面上滑鼠選中,將元件用橘框顯示。
    講個笑話,我第一次看到的時候還疑惑超久,我明明就沒寫要加框的code,為什麼會有框???
  2. 可以接線在手機上,在手機上跑Preview,就可以做到hot reload的效果
  3. 旋轉Preview螢幕的方向
  4. 顯示Preview可用的modifier,其中切換機型跟深色模式是比較常用的✨,尤其是機型,可以用選的,不用自己再手敲型號 eg: .previewDevice("iPad mini (6th generation)")
  5. 可以一次顯示多個Preview✨,就可以拿來顯示常用的幾個機型,或做淺色/深色模式的對照
    還可以點左下角pin,將最常用的畫面置頂,這樣不管切到哪個SwiftUI file都能看到
    但如果將Preview執行起來,就只能看到一個畫面
  • 最後有一點很重要的是
    SwiftUI還是一個很不穩定新的框架,每一代都改很大
    前幾代雷更是遍地開花,那些嚐鮮勇者哀嚎遍野
    所以我們要把標準提高,請根據下圖將專案的最低支援系統版本從預設的iOS14改為iOS15

SwiftUI小檔案

  1. 於2019的WWDC發布,現今邁入第四年(比Flutter年輕一歲)
    history:
SwiftUI 1 SwiftUI 2 SwiftUI 3 SwiftUI 4
Xcode11 Xcode12 Xcode13 Xcode14
iOS13 iOS14 iOS15 iOS16
  1. 採用聲明式編程(declarative programming),與Flutter一致☘️☘️☘️
  2. 也是跨平台的開發框架☘️☘️☘️,可同時開發Apple系列上多個平台的app,不需分別寫AppKit跟UIKit
  3. 對於老iOS人而言:
    1. 已經沒有ViewController了(哭哭)時代的眼淚
    2. 也沒有UIXxx了,萬物皆是struct做的View (雖然好像有些底層還是用UIKit)
    3. 更沒有AppDelegate了,由@main做為程式進入點
  4. 對於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. 資源

中文區

  1. 首推SwiftUI傳教士(給人家亂講)13的Apple開發者電子報之SwiftUI專欄
  2. 一樣是13的SwiftUI tips on twitter (請搭配weak self第93集服用)
  3. weak self discord裡有個SwiftUI頻道可以跟大家討論
  4. 喵神的書應該是中文書裡最優質的
  5. 肘子的Swift记事本內容干貨滿滿~
    他最近也寫了一篇介紹教學資源的文章,請見
  6. Youtube: ChaoCode Channel講得非常清楚簡單明瞭(聲音又好聽),可惜SwiftUI的影片較少
  7. 彼得潘老師深耕iOS教學多年,其SwiftUI的相關文章是最適合入門的
  8. AppCoda也是一個教學文章的寶庫

英文區

  1. Hacking with Swift的100 Days of SwiftUI(影片)基本上就是英文學習資源的首選了,內容又多又紮實,能跑完的都很強了
  2. 官方一定是最權威的
    1. 文件
    2. SwiftUI with Xcode
    3. tutorials
    4. 概念
    5. Sample
  3. Youtube: Swiftful Thinking Channel
  4. Swift by Sundell帶你有組織地了解SwiftUI
  5. 壞壞網站XD
  6. 剩下的我就沒看了,但看起來資源也很豐富,且持續更新,不妨參考
    1. https://swiftui-lab.com/category/swiftui/
    2. https://nilcoalescing.com/tags/swiftui/
    3. https://sarunw.com/tags/swiftui/
    4. https://www.avanderlee.com/category/swiftui/

3. 抱怨

  1. initializer的auto complete無法選擇屬性

剛回來寫SwiftUI的時候,這是最不能接受的一點
例如.frame我只想要maxWidth,這時按下Enter

他就會整個function一卡車帶出來...天吶...(就算他們都是nullable)
等於我就要所有字母自己打完

不像Flutter可以選擇自己想要的屬性⚠️⚠️⚠️(還可以順序不拘⚠️⚠️⚠️)

  1. 查不到source code的定義

應該是Apple沒有open source的關係
常常要jump to definition的時候都會被問號打槍

我才黑人問號勒???

  1. 有時用initializer,有時候用modifier
    不像Flutter所有東西都是用建構子⚠️⚠️⚠️
    這樣造成學習上的混亂,要去記哪些東西在哪裡(然後每個View各自的initializer又超多種...)

持 續 更 新 中...

寫在後面

寫到目前為止,我還是比較喜歡Flutter哈哈哈(雖然我是寫iOS起家的)
但SwiftUI的進步是有目共睹的
更何況他是Apple的親兒子,還是有一定的優勢
不過UIKit還能撐個三年沒問題
所以讓我排序的話我會排Flutter > UIKit > SwiftUI
總之
老闆叫我們寫什麼我們就寫XD

Tomorrow Preview

Yes


跨界學習系列文章

Android版:iOS Developer Learning Android. Lesson 02 - Hello World (把App裝到你的安卓手機上)
Flutter版:iOS Developer Learning Flutter. Lesson1 依然哈囉


https://github.com/mark33699/FDLS


下一篇
Flutter Developer Learning SwiftUI. @State var lesson2 = "啟動畫面"
系列文
Flutter Developer Learning SwiftUI30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言