---
# System prepended metadata

title: Swift - SwiftUI 入門
tags: [iOS]

---

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

Swift - SwiftUI 入門
===

## OverView of Content

[TOC]

## 安裝 XCode

到 AppStore 中搜尋 `xcode` 並按裝

> ![](https://i.imgur.com/URdy1g4.png)

### 建立新 App 專案

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

    > ![](https://i.imgur.com/1UOlklw.png)

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

    > 當然這邊也根據ㄒ可以選則 Multiplatform 或是其他的
    
    > ![](https://i.imgur.com/YXYpvzR.png)

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

    > ![](https://i.imgur.com/qu0bboK.png)

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

    > ![](https://i.imgur.com/acH2Aab.png)

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

    > ![](https://i.imgur.com/Z5pl7ba.png)

## 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 元件

        ```swift=
        // 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()
            }
        }
        ```

        > ![](https://i.imgur.com/1KfEX6U.png)
    
    
        :::success
        * **`opaque return type` 不透明回傳** (some View)
            
            這裡使用到的是 Swift 泛型概念；也就是只要遵守協定，泛型會自斷轉換為具體型態
            
            > 假設類型會按照你的泛型而定
            
        :::


## Appendix & FAQ

:::info
:::

###### tags: `iOS`
