---
title: 'Swift - SwiftUI 入門'
disqus: kyleAlien
---

Swift - SwiftUI 入門
===

## OverView of Content

[TOC]

## 安裝 XCode

到 AppStore 中搜尋 `xcode` 並按裝

> 

### 建立新 App 專案

1. 選擇創建新專案 Create a new Xcode project

> 

2. **選擇專案類型**：上面列表中選擇 `iOS`，Application 再點選 `App`，接這按 `next`

> 當然這邊也根據ㄒ可以選則 Multiplatform 或是其他的

> 

3. **專案基礎設定**：這裡先設置專案名即可，其他的組織名跟介面先保持原有的設定

> 

4. **選擇保存專案的資料夾**：

> 

5. 最後我們就可以看到 Xcode 為該專案設置的 Sample Code

> 

## SwiftUI 入門

Swift 本身是開源程式，而 SwiftUI 則是 Apple 開發的應用介面（UI）框架，而 **SwiftUI 並非開源框架**；SwiftUI 是一種宣告式、回應式 UI 框架

:::info
* **宣告式、回應式 & 命令式**？

**命令式**：及傳統 UI 框架，必須要開發指明確指示每個 UI 元素的確切位置，在運行時由系統繪製該佈局或元件
> 通常要大量邏輯

**宣告式、回應式**：開發只需要描述 UI 元素（大部分細節可設置），而不必擔心系統繪製細節；並會自動響應使用者對於 UI 的改變
> 可專注於應用的邏輯，減少不必要的程式

:::

### SwiftUI 基礎結構

* SwiftUI 基礎結構組成如下

1. import SwiftUI：導入 SwiftUI 模組

2. 建立 View：建立一個 struct 結構，它繼承於 View

> 以下建立一個 `ContentView` 物件

3. View#body 屬性：在該屬性下建立使用者可見的 UI 元件

> VStack、Image、Text

4. 具體 UI 元件

        // 1. 導物 模組
        import SwiftUI

        // 2. 建立繼承於 View 的結構
        struct ContentView: View {

            // View 協定要求內部變數 body 是一種 “計算屬性”
            // 3. 建立可見的 UI 元件
            var body: some View {
                // 4. 繪製內容（UI 元件）
                VStack {
                    Image(systemName: "globe")
                        .imageScale(.large)
                        .foregroundColor(.accentColor)
                    Text("Hello, world!")
                }
                .padding()
            }
        }

        struct ContentView_Previews: PreviewProvider {
            static var previews: some View {
                ContentView()
            }
        }

> 

:::success
* **`opaque return type` 不透明回傳** (some View)

這裡使用到的是 Swift 泛型概念；也就是只要遵守協定，泛型會自斷轉換為具體型態

> 假設類型會按照你的泛型而定

:::

## Appendix & FAQ

:::info
:::

###### tags: `iOS`