【從零開始學 SwiftUI 程式設計】第一行 SwiftUI 程式碼
【從零開始學 SwiftUI 程式設計】線上免費講義課程目錄
建立第一個全新的 SwiftUI 專案
- 先開啟 Xcodee 軟體
- 開啟之後，我們會看到歡迎選單(Welcome to Xcode)，我們選擇選單中的「Create a new Xcode project」，來建立一個全新的 SwiftUI 專案。
- 接著我們選擇要建立一個 iOS (iPhone 手機作業系統)的 APP 應用程式專案範本，所以在範本選單中，選擇「iOS」->「App」-> 「Next」。
設定專案選單
- Product Name
APP 專案名稱 - Team
開發者帳號。 - Organzation identifer
組織識別碼 (填寫您個人或公司網域反向網址) - Bundle identifer
識別碼 （APP 上架 到 App Store 會用來辨識，是否唯一值，重覆的話，會提示與他人同名） - Interface
選擇使用 SwiftUI 程式語言來開發 APP。 - Life Cycle
選擇使用 SwiftUI APP - Use Core Data
若勾選，將使用 Core Data 框架來處理資料庫 - include Tests、
若勾選，將實作單元測試
- Product Name
設定專案存放位置
選擇一個你想要存放位置程式預覽介面
- 程式預覽介面，剛建立完專案，或剛剛開啟專案，沒有預覽畫面，可以點擊如紅字處「Resume」，等待程式完成編譯後，即可以即時預覽，目前程式執行後的預覽畫面。
SwiftUI 開發環境介面
專案目錄結構
執行程式
點選左上角「▶」執行按鈕，即可以將專案佈署到模擬器上
更改運行的裝置
點擊裝置選單，可以選擇更換要運行的模擬器或實際手機裝置
第一行 SwiftUI 程式碼
//載入 SwiftUI 框架包，
import SwiftUI
//使用 Text 文字標籤元件，顯示「Hello, world!」文字內容
//其中 body 使用 some View，它是一個 Opaque Result Type
//因為 body 裡面沒有要特別指定只能放 Text ，所以也可以放 Button 按鈕、List 列表...等相關元件。
struct ContentView: View {
var body: some View {
Text("Hello, world!")
.multilineTextAlignment(.trailing)
.padding()
}
}
//PreviewProvider 是 SwiftUI 提供我們可以在右手邊畫面即時預覽區，預覽程式執行後的畫面。
//打包時 (Archives) Xcode 會自動移除此段程式。
//在 View 裡面填寫我們想要預覽哪一個畫面 (View)，例如這次我們想預覽：ContentView
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}
更改 SwiftUI 預覽畫面裝置
ContentView().previewDevice("iPhone 7 Plus")
相關裝置名稱
"Mac"
"iPhone 7"
"iPhone 7 Plus"
"iPhone 8"
"iPhone 8 Plus"
"iPhone SE"
"iPhone X"
"iPhone Xs"
"iPhone Xs Max"
"iPhone Xʀ"
"iPad mini 4"
"iPad Air 2"
"iPad Pro (9.7-inch)"
"iPad Pro (12.9-inch)"
"iPad (5th generation)"
"iPad Pro (12.9-inch) (2nd generation)"
"iPad Pro (10.5-inch)"
"iPad (6th generation)"
"iPad Pro (11-inch)"
"iPad Pro (12.9-inch) (3rd generation)"
"iPad mini (5th generation)"
"iPad Air (3rd generation)"
"Apple TV"
"Apple TV 4K"
"Apple TV 4K (at 1080p)"
"Apple Watch Series 2 - 38mm"
"Apple Watch Series 2 - 42mm"
"Apple Watch Series 3 - 38mm"
"Apple Watch Series 3 - 42mm"
"Apple Watch Series 4 - 40mm"
"Apple Watch Series 4 - 44mm"
SwiftUI 同時預覽多台裝置畫面
Group {
ContentView()
.previewDevice(PreviewDevice(rawValue: "iPhone 7"))
.previewDisplayName("iPhone 7")
ContentView()
.previewDevice(PreviewDevice(rawValue: "iPhone 12 Pro Max"))
.previewDisplayName("iPhone 12 Pro Max")
}
那這次的課程就介紹到這邊囉～
順帶一提，KT 線上教室，臉書粉絲團，會不定期發佈相關資訊，不想錯過最新資訊，不要忘記來按讚，加追蹤喔！也歡迎大家將這套課程分享給更多人喔。
我們下次再見囉！！！掰掰～
