swiftUI語法學習

當您學過android / css佈局，會有一些佈局知識以及關鍵字的瞭解，因此在學習SwiftUI基本上可以用這些關鍵字+swiftui進行谷歌搜尋，就可以找到相對應用法，例如：

  1. 想Image元件做左邊padding就會收尋swiftui padding left 10px[搜尋結果]
  2. 想對垂直佈局(VStack)做左邊對齊就會收尋swiftui vstack align left[搜尋結果]

SceneDelegate start with ViewController

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

class SceneDelegate: UIResponder, UIWindowSceneDelegate {

    var window: UIWindow?

    func scene(_ scene: UIScene, willConnectTo session: UISceneSession, options connectionOptions: UIScene.ConnectionOptions) {
        // Use this method to optionally configure and attach the UIWindow `window` to the provided UIWindowScene `scene`.
        // If using a storyboard, the `window` property will automatically be initialized and attached to the scene.
        // This delegate does not imply the connecting scene or session are new (see `application:configurationForConnectingSceneSession` instead).
        if #available(iOS 13.0, *) {
            window?.overrideUserInterfaceStyle = .light
        }
        guard let _ = (scene as? UIWindowScene) else { return }
        
        //從Scene啟動ViewController
        if let windowScene = scene as? UIWindowScene {
           let window = UIWindow(windowScene: windowScene)
           window.rootViewController = SwiftUIViewController()
           self.window = window
           window.makeKeyAndVisible()
        }
    }
}

常用快捷鍵

  • 格式化代碼：Command + A -> control + I
  • 區域折疊：Command+Option+Left/Right
  • 全檔折疊：Shift+Command+Option+Left/Right

註解

變數 | Variable

1
2
3
4
5
class AppDelegate: NSObject, UIApplicationDelegate {
    /// IOD裝置小幫手，將常用流程封裝成函數。
    /// SwiftUI可以透過 **@UIApplicationDelegateAdaptor(AppDelegate.self) var delegate** 取得此物件
    @StateObject var idoDeviceHelper = IDODeviceHelper()
}

函數 | Function

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
/**
        两个整数相加
        # 加法（标题一）
        这个方法执行整数的加法运算。
        ## 加法运算（标题二）
        想加个试试看
     
        中间隔着一个横线
        ***
     
        代码块的*使用*方法:
        ``(不用添加括号)`

            let num = func add(a: 1, b: 2)
            // print 3
        ``(不用添加括号)`
            
        - c: 参数一
        - d: 参数二
        - f: 参数三
     
        - Parameters:
            - a: 加号左边的整数
            - b: 加号右边的整数
        - Throws: 抛出错误，此方法不抛出错误，只为另外演示注释用法。
        - Returns: 和
     
        - Important: 注意这个方法的参数。
        - Version: 1.0.0
        - Authors: Wei You, Fang Wang
        - Copyright: 版权所有
        - Date: 2020-12-28
        - Since: 1949-10-01
        - Attention: 加法的运算
        - Note: 提示一下，用的时候请注意类型。
        - Remark: 从新标记一下这个方法。
        - Warning: 警告，这是一个没有内容的警告。
        - Bug: 标记下bug问题。
        - TODO: 要点改进的代码
        - Experiment: 试验点新玩法。
        - Precondition: 使用方法的前置条件
        - Postcondition：使用方法的后置条件
        - Requires: 要求一些东西，才能用这个方法。
        - Invariant: 不变的
     */
    func add(a: Int, b: Int) throws -> Int {
        return a + b
    }

XCode常用設定

  • 開啟左側折疊符號：Settings… -> Text Editing -> 『Code folding ribbon』勾選

SwiftUI元件

常用元件參數設定說明。

佈局

官方佈局文件

VStack 垂直佈局

  • 顯示方式
    item1
    item2
    item3

  • 常用參數

1
2
3
4
5
6
VStack(
alignment: .leading, 
spacing: 10
) {
    Text("Hi VStack")
}

HStack 水平佈局

  • 顯示方式
    item1 item2 item3

  • 常用參數

1
2
3
4
5
6
HStack(
alignment: .leading, 
spacing: 10
) {
    Text("Hi HStack")
}

ZStack 層疊佈局

顯示方式 來源-官方提供

  • 常用參數
1
2
3
4
5
6
ZStack(
alignment: .leading, 
spacing: 10
) {
    Text("Hi VStack")
}

Keyword

1
2
3
垂直, Vertical, ver-ti-cal
水平, Horizontal, ho-ri-zon-tal
代碼折疊色帶, Code folding ribbon, code fold-ing rib-bon