SwiftUI的认识与使用

╰半夏微凉° 2024-03-23 00:12 43阅读 0赞

**SwiftUI简介**

SwiftUI是苹果推出的一个新的UI框架，它使用了声明的方式，通过视图，基础控件和布局控件来进行页面的开发。

SwiftUI具有跨平台性，一份SwiftUI代码可以同时跑在iOS、macOS、tvOS、watchOS平台上。

SwiftUI编写的页面代码更简洁，广泛使用链式调用。

SwiftUI视图和UIKit视图可以互相转换，对于将旧的项目过度到新布局方式比较友好。

SwiftUI的运行速度优于UIKit，他减少了界面的层次结构，因此可以减少绘制步骤，并且他完全绕过了CoreAnimation，直接进入Metal，可以有优秀的渲染性能。

其实声明式页面布局前端已经出现了很久，像React, Vue都是使用的声明式布局，声明式布局与命令式布局相比有很多优势，

如：单向数据流，双向数据绑定，只要数据状态改变使用了这些数据的视图就会自动更新等。

声明式布局是UI布局方式的未来，这次苹果从命令式编程过度到声明式编程算是一个大的进步。

**设计模式**

采用Struct组成的树形结构组织页面。叶子节点是基本控件。

这棵Struct树类似于React的抽象语法树，它会在编译阶段将这些描述信息翻译成真实的UIKit中的UI控件。

**视图结构**

**APP根入口**

APP的根入口是一个Struct结构体，它遵守APP协议

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 </td> 
 <td> <code>@</code><code>main</code> <code>struct</code>&nbsp;<code>WorldLandMarkApp</code><code>:&nbsp;</code><code>App</code>&nbsp;<code>{ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>var</code>&nbsp;<code>body</code><code>:&nbsp;</code><code>some</code>&nbsp;<code>Scene</code>&nbsp;<code>{ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>WindowGroup</code>&nbsp;<code>{ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>ContentView</code><code>()</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>}</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>}</code> <code>}</code> </td> 
 </tr> 
 </tbody> 
</table>

**App协议**

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 </td> 
 <td> <code>public</code>&nbsp;<code>protocol</code>&nbsp;<code>App</code>&nbsp;<code>{ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>associatedtype</code>&nbsp;<code>Body</code>&nbsp;<code>:&nbsp;</code><code>Scene</code> <code>&nbsp;</code>&nbsp; <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>@</code><code>SceneBuilder</code>&nbsp;<code>@</code><code>MainActor</code>&nbsp;<code>var</code>&nbsp;<code>body</code><code>:&nbsp;</code><code>Self</code><code>.</code><code>Body</code>&nbsp;<code>{&nbsp;</code><code>get</code>&nbsp;<code>}</code> <code>&nbsp;</code>&nbsp; <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>@</code><code>MainActor</code>&nbsp;<code>init</code><code>()</code> <code>}</code> </td> 
 </tr> 
 </tbody> 
</table>

**页面结构体**

some表示返回的是一个遵守了View协议的不透明类型，也就是var body: some View \{\} 这个计算属性中，只能return一种类型，不能出现if a \{Text()\} else \{List\{\}\} 这样的2种类型。

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 </td> 
 <td> <code>struct</code>&nbsp;<code>LandmarkList</code><code>:&nbsp;</code><code>View</code>&nbsp;<code>{ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>var</code>&nbsp;<code>body</code><code>:&nbsp;</code><code>some</code>&nbsp;<code>View</code>&nbsp;<code>{ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>Text</code><code>(</code><code>/*@START_MENU_TOKEN@*/</code><code>"Hello, World!"</code><code>/*@END_MENU_TOKEN@*/</code><code>)</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>}</code> <code>}</code> </td> 
 </tr> 
 </tbody> 
</table>

**View协议**

associatedtype Body : View 表示协议中定义了一个新类型Body，这个Body遵守View协议。

Self.Body 表示协议中的Body类型。Self表示类型本身，self表示实例变量本身

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 </td> 
 <td> <code>public</code>&nbsp;<code>protocol</code>&nbsp;<code>View</code>&nbsp;<code>{ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>associatedtype</code>&nbsp;<code>Body</code>&nbsp;<code>:&nbsp;</code><code>View</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>@</code><code>ViewBuilder</code>&nbsp;<code>@</code><code>MainActor</code>&nbsp;<code>var</code>&nbsp;<code>body</code><code>:&nbsp;</code><code>Self</code><code>.</code><code>Body</code>&nbsp;<code>{&nbsp;</code><code>get</code>&nbsp;<code>}</code> <code>}</code> </td> 
 </tr> 
 </tbody> 
</table>

每个页面swift文件中都有2个结构体，一个表示要开发的页面，另一个是使用Canvas进行展示出来的视图，其中struct ContentView\_Previews: PreviewProvider可以根据Debug需要在外层嵌套导航条，展示Group组。

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 </td> 
 <td> <code>import</code>&nbsp;<code>SwiftUI</code> <code>&nbsp;</code>&nbsp; <code>struct</code>&nbsp;<code>ContentView</code><code>:&nbsp;</code><code>View</code>&nbsp;<code>{ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>var</code>&nbsp;<code>body</code><code>:&nbsp;</code><code>some</code>&nbsp;<code>View</code>&nbsp;<code>{ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>Text</code><code>(</code><code>"Hello, world!"</code><code>)</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>.</code><code>padding</code><code>()</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>}</code> <code>}</code> <code>&nbsp;</code>&nbsp; <code>struct</code>&nbsp;<code>ContentView_Previews</code><code>:&nbsp;</code><code>PreviewProvider</code>&nbsp;<code>{ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>static</code>&nbsp;<code>var</code>&nbsp;<code>previews</code><code>:&nbsp;</code><code>some</code>&nbsp;<code>View</code>&nbsp;<code>{ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>ContentView</code><code>()</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>}</code> <code>}</code> </td> 
 </tr> 
 </tbody> 
</table>

它们不一定保持一致，如：

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 </td> 
 <td> <code>struct</code>&nbsp;<code>LandmarkList_Previews</code><code>:&nbsp;</code><code>PreviewProvider</code>&nbsp;<code>{ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>struct</code>&nbsp;<code>DeviceType</code><code>:&nbsp;</code><code>Identifiable</code>&nbsp;<code>{ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>var</code>&nbsp;<code>id</code>&nbsp;<code>=&nbsp;</code><code>UUID</code><code>()</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>var</code>&nbsp;<code>name</code><code>:&nbsp;</code><code>String</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>}</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code>&nbsp; <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>static</code>&nbsp;<code>var</code>&nbsp;<code>previews</code><code>:&nbsp;</code><code>some</code>&nbsp;<code>View</code>&nbsp;<code>{ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>//使用ForEach展示多个设备</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>ForEach</code><code>([</code><code>DeviceType</code><code>(</code><code>name</code><code>:&nbsp;</code><code>"iPhone 12"</code><code>),</code><code>DeviceType</code><code>(</code><code>name</code><code>:&nbsp;</code><code>"iPhone 13"</code><code>)]){&nbsp;</code><code>deviceItem</code>&nbsp;<code>in</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>LandmarkList</code><code>().</code><code>previewDevice</code><code>(</code><code>PreviewDevice</code><code>(</code><code>rawValue</code><code>:&nbsp;</code><code>deviceItem</code><code>.</code><code>name</code><code>))</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>.</code><code>previewDisplayName</code><code>(</code><code>deviceItem</code><code>.</code><code>name</code><code>)</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>}</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code>&nbsp; <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>}</code> <code>}</code> </td> 
 </tr> 
 </tbody> 
</table>

**状态双向绑定**

**@State单页面状态绑定**

通过@State修饰的变量是做了双向绑定的，如果这个变量数据发生了改变，所有使用这个变量的视图都会自动更新。但是@State的修饰范围是当前的一个视图，如果想一个状态修改，整个APP范围内使用这个变量的视图全部都更新，则需要使用全局环境变量的模式。

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 </td> 
 <td> <code>@</code><code>State</code>&nbsp;<code>private</code>&nbsp;<code>var</code>&nbsp;<code>isOpen</code> <code>struct</code>&nbsp;<code>LandmarkList</code><code>:&nbsp;</code><code>View</code>&nbsp;<code>{ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code>&nbsp; <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>@</code><code>State</code>&nbsp;<code>private</code>&nbsp;<code>var</code>&nbsp;<code>isOpen</code><code>:&nbsp;</code><code>Bool</code>&nbsp;<code>=&nbsp;</code><code>false</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>//@ObservedObject: 全局环境变量绑定</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>@</code><code>ObservedObject</code>&nbsp;<code>var</code>&nbsp;<code>userData</code><code>:&nbsp;</code><code>UserData</code>&nbsp;<code>=&nbsp;</code><code>UserData</code><code>()</code> <code>}</code> </td> 
 </tr> 
 </tbody> 
</table>

**@ObservableObject+@Published全局状态变量**

要使用全局状态变量，则需要创建一个class，并遵守ObservableObject协议。 然后在这个类中定义一个@Published修饰的变量 @Published var userLandmarks， 当@Published修饰的变量更新时，那么使用了@Published修饰的变量的视图就会对应更新。

定义一个UserData，遵守ObservableObject协议

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 </td> 
 <td> <code>import</code>&nbsp;<code>SwiftUI</code> <code>import</code>&nbsp;<code>Combine</code> <code>&nbsp;</code>&nbsp; <code>class</code>&nbsp;<code>UserData</code><code>:&nbsp;</code><code>ObservableObject</code>&nbsp;<code>{ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>@</code><code>Published</code>&nbsp;<code>var</code>&nbsp;<code>userLandmarks</code><code>:[</code><code>Landmark</code><code>] =&nbsp;</code><code>landmarks</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code>&nbsp; <code>}</code> </td> 
 </tr> 
 </tbody> 
</table>

使用时，也要在对应的视图中加上 @ObservedObject修饰符,然后更新这个变量self.userData.userLandmarks\[self.userLandmarkIndex\].isFeatured.toggle()

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 </td> 
 <td> <code>struct</code>&nbsp;<code>LandmarkDetail</code><code>:&nbsp;</code><code>View</code>&nbsp;<code>{ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>var</code>&nbsp;<code>landmark</code><code>:&nbsp;</code><code>Landmark</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>@</code><code>ObservedObject</code>&nbsp;<code>var</code>&nbsp;<code>userData</code><code>:&nbsp;</code><code>UserData</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code>&nbsp; <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>var</code>&nbsp;<code>userLandmarkIndex</code><code>:&nbsp;</code><code>Int</code>&nbsp;<code>{ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>userData</code><code>.</code><code>userLandmarks</code><code>.</code><code>firstIndex</code><code>(</code><code>where</code><code>: {$</code><code>0</code><code>.</code><code>id</code>&nbsp;<code>==&nbsp;</code><code>landmark</code><code>.</code><code>id</code><code>})!</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>}</code> <code>&nbsp;</code>&nbsp; <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>var</code>&nbsp;<code>body</code><code>:&nbsp;</code><code>some</code>&nbsp;<code>View</code>&nbsp;<code>{ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>Button</code><code>(</code><code>action</code><code>: { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>self</code><code>.</code><code>userData</code><code>.</code><code>userLandmarks</code><code>[</code><code>self</code><code>.</code><code>userLandmarkIndex</code><code>]</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>.</code><code>isFeatured</code><code>.</code><code>toggle</code><code>()</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>}){ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>if</code>&nbsp;<code>landmark</code><code>.</code><code>isFeatured</code>&nbsp;<code>{ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>Image</code><code>(</code><code>"icon_rcxinhua_selected"</code><code>)</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>.</code><code>resizable</code><code>().</code><code>frame</code><code>(</code><code>width</code><code>:&nbsp;</code><code>20</code><code>,&nbsp;</code><code>height</code><code>:&nbsp;</code><code>20</code><code>,&nbsp;</code><code>alignment</code><code>: .</code><code>center</code><code>)</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>}&nbsp;</code><code>else</code>&nbsp;<code>{ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>Image</code><code>(</code><code>"icon_rcxinhua_defaultselected"</code><code>)</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>.</code><code>resizable</code><code>().</code><code>frame</code><code>(</code><code>width</code><code>:&nbsp;</code><code>20</code><code>,&nbsp;</code><code>height</code><code>:&nbsp;</code><code>20</code><code>,&nbsp;</code><code>alignment</code><code>: .</code><code>center</code><code>)</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>}</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>}</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>}</code> <code>}</code> </td> 
 </tr> 
 </tbody> 
</table>

**单向数据流**

用户操作导致@State变量发生了改变，

@State变量改变导致使用了@State变量的UI视图就会自动更新

继续等待用户操作触发@State变量发生变化

![9bb216e8a100971631d44bc426255ff4.png][]

**UIKit控件与SwiftUI中控件的转换**

**UIKit转SwiftUI**

通过UIViewRepresentable协议将UIView包装成SwifUI的View来使用。

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 9 </td> 
 <td> <code>struct</code>&nbsp;<code>MapView</code><code>:&nbsp;</code><code>UIViewRepresentable</code>&nbsp;<code>{ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>let</code>&nbsp;<code>view</code><code>:&nbsp;</code><code>UIView</code>&nbsp;<code>=&nbsp;</code><code>UIView</code><code>()</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>func</code>&nbsp;<code>makeUIView</code><code>(</code><code>context</code><code>:&nbsp;</code><code>Context</code><code>) -</code><code>&gt;</code>&nbsp;<code>some</code>&nbsp;<code>UIView</code>&nbsp;<code>{ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>return</code>&nbsp;<code>view</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>}</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>func</code>&nbsp;<code>updateUIView</code><code>(</code><code>_</code>&nbsp;<code>uiView</code><code>:&nbsp;</code><code>UIViewType</code><code>,&nbsp;</code><code>context</code><code>:&nbsp;</code><code>Context</code><code>) { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>view</code><code>.</code><code>backgroundColor</code>&nbsp;<code>= .</code><code>red</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>}</code> <code>}</code> </td> 
 </tr> 
 </tbody> 
</table>

**SwiftUI转UIKit**

通过UIHostingController将SwiftUI包装成UIView

<table> 
 <tbody> 
 <tr> 
 <td> 1 </td> 
 <td> <code>UIHostingController</code><code>(</code><code>rootView</code><code>:&nbsp;</code><code>ContentView</code><code>())</code> </td> 
 </tr> 
 </tbody> 
</table>

**Model模型定义**

List,ForEach等要求被循环的每个元素都要有一个唯一的标识

这样数据变更时，可以迅速定位刷新对应的UI，提高性能

所以，元素要遵循Identifiable协议（实现id协议）

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 </td> 
 <td> <code>struct</code>&nbsp;<code>Landmark</code><code>:&nbsp;</code><code>Identifiable</code>&nbsp;<code>{ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>var</code>&nbsp;<code>id</code>&nbsp;<code>=&nbsp;</code><code>UUID</code><code>()</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>let</code>&nbsp;<code>name</code><code>:&nbsp;</code><code>String</code> <code>}</code> </td> 
 </tr> 
 </tbody> 
</table>

[9bb216e8a100971631d44bc426255ff4.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/ae2743c888df4f89af5521d06dda625c.png