SwiftUI 程式開發初體驗
WWDC19 發表了令人興奮的 SwiftUI，幫助我們以更直覺更精簡的程式製作 App 畫面。從前我們開發 iOS App 畫面時搭配的是 UIKit framework，雖然我們以 Swift 開發，但是底層的 UIKit 還是 Objective-C 。SwiftUI 則是 Swift 開發的全新 framework，讓我們連底層的 UI framework 都升級成 Swift。
不過也因為 SwiftUI 是 iOS 13 才有的全新 framework，所以 iOS 13 以前的 iPhone & iPad 是不支援的。 相信這不會是太大的問題，因為 iOS 使用者的升級率很高，等到 2020 年，應該會有一半以上的使用者升級到 iOS 13。
事不宜遲，我們趕緊打開熱騰騰的 Xcode 11 體驗 SwiftUI 吧。
1. 建專案時多了一個 Use SwiftUI 的選項。
勾選 Use SwiftUI 後，專案裡多了幾個從前沒有的檔案，SceneDelegate.swift & ContentView.swift。不過也有些檔案消失了，比方我們熟悉的 Main.storyboard。(之後需要的話，還是可以另外新增 storyboard 檔。)
2. 預覽(Preview) SwiftUI 程式設計的畫面。
ContentView.swift 裡已寫好一些 SwiftUI 設計的畫面。點選右邊預覽畫面右上角的 Resume 即可預覽。
ps: 預覽畫面的功能要 macOS 10.15 才支援，因此 10.14 是看不到預覽的。
3. 編輯修改畫面。
調整畫面的方法有兩種。
- 修改程式。
我們可修改左邊的程式碼，調整 Text 顯示的文字內容，然後在右邊的預覽畫面即時看到更新。
- 從 Attributes inspector 設定。
我們也可以從以前編輯 storyboard 時習慣的 Attributes inspector 設定。如下圖所示，當我們從右邊的 Attributes inspector 修改 Text 的文字內容時，程式碼和預覽畫面都會同步更新。
我們也可以按住 command 鍵再點選文字元件顯示跟它有關的操作選項。
點選其中的 Inspect 將顯示此元件的設定畫面。如下圖所示，我們可調整它的文字內容，字體大小，顏色等。
按住 command 鍵再點選顯示操作選項的方法也可以套用在程式上，因此若我們從程式 Text 按住 command 鍵再點選一樣可以叫出選項。
剛剛我們修改了文字內容，接著讓我們試試調整文字的顏色，將 Color 設為憂鬱的 Blue。
4. 加入元件。
加入元件的方法一樣有兩種。
- 將元件加到預覽畫面。
首先我們點選右上方的 + 打開 Library 視窗。
Library 視窗的第一個 icon 分頁 Views library 顯示許多可以加到畫面的元件。
我們切換到第 4 個 icon media library 分頁，將圖片拖曳到預覽畫面的文字上方。
此時可發現左邊的程式碼自動更新，變成以 VStack 包著 Image & Text。而右邊的預覽畫面若沒有更新，可點選右上角的 Resume 要求它更新。
- 修改程式加元件。
我們也可以直接修改程式加入元件。如下圖所示，我們在 Image 上方新增一行文字，輸入 Text("與你相遇 好幸運").color(.blue)
懶得打字嗎 ? 沒關係，我們也可以從 Libarary 視窗將元件直接拖曳到程式碼裡。
將 Toggle 元件加到圖片上方。
傑克，這真是太神奇了，它聰明地自動變成 Toggle 元件的程式碼。
5. 點選程式或預覽畫面上的元件。
當我們點選預覽畫面裡的元件時，對應的程式將自動被選取。比方點選下圖右邊的圖片時，自動選取對應的 Image 程式。
滑鼠游標停在程式時，也會自動選取預覽畫面上對應的 UI 元件，比方下圖游標停在 Text 的文字，因此自動選取右邊的文字元件。
6. 執行 App，修改程式即時更新。
我們可點選預覽畫面右邊的按鈕執行 App。
點選右上的按鈕將讓預覽畫面變成可以操作互動的 App。
更棒的是，此時我們還可以修改程式，比方將文字變成紅色，然後右邊的 App 文字馬上變成紅色。
點選右下的按鈕則會將 App 安裝啟動到 iPhone 上，它一樣有修改程式即時更新 App 的功能。
App 安裝到 iPhone 時，要先在 Team 欄位設定開發的帳號。在 Xcode 11，Team 欄位對應的 Signing 區塊不再歸屬於 General 分頁，而是長在 Signing & Capabilities 下。
最後讓我們再見識 SwiftUI 另一個驚奇的地方。SwiftUI 還支援 iOS 13 的 dark mode，因此當彼得潘的 iPhone 調整成 dark mode 時，App 畫面的背景顏色將直接從白色變成黑色呢。
以上就是彼得潘的 SwiftUI 初體驗，看來 SwiftUI 的確超方便的，製作 App 畫面變得簡單許多。之後彼得潘將繼續研究 SwiftUI，期待可以學習認識更多 SwiftUI 的有趣功能。
