初探 SwiftUI

9 min readJul 13, 2020

Xcode11 版本（最低支援 macOS 10.14.4）開放撰寫 SwiftUI 框架，但若要即時看到預覽畫面，仍須將 macOS 版本升至 macOS 10.15 上。

SwiftUI好處是可支援 UI進階功能，如 Dark Mode、Localization、Accessibility 等，且可以支援所有的平台，包含 macOS、iOS、iPadOS、watchOS 及 tvOS。

若 Xcode 新建 SwiftUI 專案有預覽視窗卻無法顯示，得到 OSStatus error -10825 /* The app cannot run on the current OS version*/，注意是否左上角的 Deployment Target 誤選到 macOS。

設計 SwiftUI 畫面

Text = UILabel

List = UITableView

Toggle = UISwitch

Text.font / Text.foregroundColor / Text.multilineTextAlignment

Image.resizable( ).frame(width: height: alignment)

Stack(alignment: spacing) { }

有三種方式可瀏覽設定選項

程式碼中對元件按 “Command+滑鼠左鍵 Click”，叫出選單後選 “Show SwiftUI Inspector”

直接在預覽畫面對元件按“Command+滑鼠左鍵 Click”，叫出選單後選 “Show SwiftUI Inspector”

Stack

SwiftUI 沒有任何約束條件，取而代之的是 Stack 的概念，Stack 可調整 Spacing、Alignment、Padding 與 Frame，調整畫面時程式碼會有所連動改變，反之亦然，有異於 Storyboard 跟程式碼間的不連動。

因 var body : some View 只能返回一個物件，故有複數以上的 UI 元件皆需包進 Stack 裡。

UI 元件內的佈局影響力會大於 Stack，例如 Stack Alignment 選 leading ，Text 元件選 Trailing，則排列會以 Trailing 優先。

結合UIKit 與 SwiftUI View

要完成以下視圖有三個部分，一個是 UIKit 底下的 MapView，以及兩個由 SwiftUI 所創造的 CircleImage 與 Stacks and text。

創造 MKMapView (MapView.swift）

UIKit 所製造出來的 view 須遵從UIViewRepresentable 協定方可被加入 SwiftUI 中，協定將會加入兩個 methods，makeUIView(context:)與updateUIView(_:context:) ，分別建立與更新 MKMapView。

當預覽畫面在 static mode 會呈現一片空白是因為此模式下，只支持 SwiftUI 視圖，因MKMapView 為 UIView 的子類，故需切到 live mode 以查看地圖。

創造 CircleImage (CircleImage.swift)

創造 Stacks and text (ContentView.swift)

結合視圖

Spacer

Spacer()是一個填空剩餘空間的隱形空間，在此程式碼中，它加在整個 VStack 的最下層，Spacer 會考慮整個 VStack 的長度減掉既有 UI 元件的總長度，沿著 Y 軸將剩餘空間皆列為 Spacer。此程式碼中 Spacer( ) 加在最下面，會將其他 UI 元件往上推，造成從畫面最頂端開始往下排列的效果。

若添加在 HStack 裡，看添加的位置，會從螢幕左右兩邊開始排列。