【Day23】SwiftUI Essentials - SwiftUI 基础

在这边先声明，这篇是是WWDC大会的部分翻译，我找到的也是别人翻译以及笔记的

文章，只是我觉得很适合让边学边做的这类人更深入的了解Swift UI的整体

运作流程，所以我就贴在这边，边简单的翻译边学。

原本的文章出处：SwiftUI Essentials - SwiftUI 基础

Data Flow Through SwiftUI - SwiftUI 中的数据流

SwiftUI 介绍

　SwiftUI 简单来说是原本 UIKit 原有的控件再多加一些定制功能　

以更好的适应多平台的开发。

Views and Modifiers - 视图和修饰

View 是图形介面的基础，每个 View 决定了 App 里的一部分UI。

通过编写声明式 View 关系结构来完成对ＵＩ的设定。

(这边也可以使用图形介面的方式设定，算是殊途同归)

　　　　　　　Views and Modifiers - 视图和修饰

View Container Syntax - 视图容器语法

View 容器，以 VStack 为例，容器定义了内容里的层级关系。 VStack 是透过

struct 设定，初始化函数内有着所有可设定的参数。

例如 Alignment，Spacing。在 swiftUI 里通过 VStack(参数) 来初始化，

例如：VStack(alignment: .leading)。

View Container Syntax - 视图容器语法

Binding Syntax - 绑定语法

View 的 struct 中可以在变量前加上 @State，代表此变量能与其他的变量进行绑定。

只要在需绑定的变量前加上“$”即可，等下会详细的介绍。

Binding Syntax -绑定语法

Modifier - 修饰

在一个已有的 View 後面添加 .Modifier(参数)。SwiftUI 里这类语法叫 Modifier。

它的功能是用自定义参数，从一个原始物件中设定出一个符合需求的物件。

　　　　　　　　Modifier - 修饰

SwiftUI 会按照 Modifier 的顺序把 Modifier 贴加到物件中，

所以 Modifier 添加的顺序会影响　View 最终的样式。

SwiftUI 希望开发者使用模块化的视图以及物件，

每个视图以及物件最好都有明确的样式以及功能。

　　　　　　　　Modifier 的顺序会影响样式

Custom Views - 自订义视图

通过编写类型为 View 的 struct 来实现自定义视图。

 struct CustomView: View {
     let var customVars: Type
     var body: some View {
       //视图内容
     }
  } 

struct 中的 var body: some View，定义了自定义视图中的内容。

some 是 swift 的语法，表示自动推断返回类型。

SwiftUI 官方建议先使用自定义视图，每一个自定义视图完成一些基

础的功能和界面，最终把这些 Custom Views 组合起来成一个功能完

整，构成复杂的 App。

　　　　　　　　自定义视图

Compare with UIKit - 与 UIKit 的对比

基於 UIKit 开发的自定义视图通常是一个继承 UIView 的 CLass ;

SwiftUI 则是一个继承 View 类型的 Struct。假如我要修改视图的特定公共变量，

像　Opacity 和 BackgroundColor。在 UIKit 中，我们的自定义视图继承了 UIView

的所有公共属性；在 SwiftUI 中，我们通过给 View 添加 Modifier 来实现。这些　

Modifier　灵活遍步在各种 Views 中，而不是像　UIKit 继承全部 UIView 属性，

从而达到轻量化，占用更小的存储空间的效果。

在　SwiftUI 中，View 被定义为一种 Protocol。

　　　　　　　　View 被定义为一种 protocol

　Primitive Views 原始视图

SwiftUI 提供了一系列原始视图，这些视图是视图的最小单位，类似物件。

例如：Text，Color，Image　等等。开发者可以利用这些原始的视图来构件

复杂精细的 GUI。在《Building Custom Views in SwiftUI》课程有关於自定义视图的

详细介绍。

由於後面的内容都还算简单，所以这边就不多浪费时间翻了，推荐去看原始的连结。

两篇看完就对 Swift UI 的运作过程有大概的理解。