低代码开发app,seo课程总结,注册劳务公司注册条件及费用,wordpress服务上一篇讲到了组件及组件化#xff0c;从概念和优/缺点两个方向说明了组件化的意义#xff0c;更为重要的是#xff0c;组件和组件化是一个在编程领域#xff0c;放之四海皆可以的概念#xff0c;理解和运用它是非常必要的#xff0c;希望大家能掌握。今天我们介绍另一个特…上一篇讲到了组件及组件化从概念和优/缺点两个方向说明了组件化的意义更为重要的是组件和组件化是一个在编程领域放之四海皆可以的概念理解和运用它是非常必要的希望大家能掌握。今天我们介绍另一个特性--预览(Preview). 概念
预览是苹果给SwiftUI新添加的一个重要特性也可以算得上是一个重大突破。它可以直接在macOS上进行渲染并显示界面(即所见即所得)很类似Flutter的Hot Reloading。熟悉Hot Reloading技术的同学都知道它给我们编程带来很多的方便。 然而相比Hot Reloading技术预览又有些不同甚至可以说更好一些。因为Hot Reloading技术需要运行App并且当调整界面或数据状态发生变化的时需要重启App。而预览就完全不需要做这些事情(不用运行App数据变化也不需要重启App)。 再说明一点预览的实现机制整体概括为:Xcode工具对代码进行静态分析(依赖于SwiftSyntax框架)然后找到所有遵循ProviewProvider协议的类型进而对此进行渲染和显示。 讲完了概念用示例图来展示预览情况。
现象 上图表示
1.左边是编写代码区域右边是实时预览区域实现了所见即所得的效果。
2.红框标注了遵循ProviewProvider协议。 介绍完了预览的概念和样式。大家一定很好奇预览功能是怎么实现的它的内部机制是怎么样的呢下面我们一起看下。 内部机制
我们先拿个工程来举例。先创建一个SwiftUI的新工程(注意:先不要写任何代码也不启动预览功能)。如下图所示 然后找到DerivedData目录。找一个后缀.preview-thunk.swift的文件 此时在这个目录上是找不到的(因为没有编译连工程目录都没有)。 接着编译(CommandB)工程(记得开启预览功能).就可以在DerivedData目录上找到 .preview-thunk.swift文件了。对于本机来说.preview-thunk.swift的完整路径为:
DerivedData/工程目录/Build/Intermediates.noindex/Previews/TestSwiftUIDemo5/Intermediates.noindex/TestSwiftUIDemo5.build/Debug-iphonesimulator/TestSwiftUIDemo5.build/Objects-normal/x86_64/ContentView.5.preview-thunk.swift.
文件效果如下图所示 然后打开该文件。会显示如下代码
_private(sourceFile: ContentView.swift) import TestSwiftUIDemo5
import SwiftUI
import SwiftUIextension ContentView_Previews {_dynamicReplacement(for: previews) private static var __preview__previews: some View {#sourceLocation(file: /Users/hyh/Documents/MyProject/TestSwiftUIDemo5/TestSwiftUIDemo5/ContentView.swift, line: 19)__designTimeSelection(ContentView(), #5016.[2].[0].property.[0].[0])#sourceLocation()}
}extension ContentView {_dynamicReplacement(for: body) private var __preview__body: some View {#sourceLocation(file: /Users/hyh/Documents/MyProject/TestSwiftUIDemo5/TestSwiftUIDemo5/ContentView.swift, line: 12)__designTimeSelection(Text(__designTimeString(#5016.[1].[0].property.[0].[0].arg[0].value, fallback: Hello, world!)).padding(), #5016.[1].[0].property.[0].[0])#sourceLocation()}
}import struct TestSwiftUIDemo5.ContentView
import struct TestSwiftUIDemo5.ContentView_Previews
这个代码不用看懂我们只需要了解下面几个特性 _private(sourceFile: ): 让当前代码可以访问原本外部无法访问的变量和函数这样我们就无需在项目代码中提高访问权限。简单来说通过该函数能直接访问一些不能访问的变量或函数。 #sourceLocation(file: ,line: ):负责将衍生代码中发生的崩溃等调试信息反映在我们写的代码上帮助开发者找到对应的源代码位置。等同于错误日志输入。 _dynamicReplacement(for: ):指定某个方法作为另一个方法的动态替代方法。在上面的代码中主要是__preview__previews 函数并让它作为预览入口。 最后两行import代码是导入struct TestSwiftUIDemo5.ContentView和 struct TestSwiftUIDemo5.ContentView_Previews 两个结构体的相关信息(包含变量)保证代码的编译成功。
以上代码简单来说就是确定一个入口函数并且依赖上自己编写的代码的相关信息。 这里注意下
在该目录下有两个.preview-thunk.swift文件经过实践验证这两个文件内容基本一样一起变化(代码一变化两文件内容一起变化)所以存在两个一样的文件。 然而Xcode如何加载预览视图的呢
这个就需要查看ContentView.5.preview-thunk.dylib(.dylib后缀是动态库)。如下图所示 然后打开.dylib文件需要在在当前目录下在终端执行
nm ./ContentView.5.preview-thunk.dylib | grep T //该命令作用是罗列出.dylib文件中的符号
执行结果如下图 其实该动态库只有一个_main 方法。在该方法中主要进行了定义预览相关的环境设置、设置预览初始状态等操作。然后再创建了用于预览的进程。并通过 XPC 在预览进程与 Xcode 之间进行通信最后实现了在 Xcode 中预览特定视图的目的。这就是Xcode加载预览视图的整个过程。 最后总结下预览的工作流程。
预览的工作流程该流程描述来自网络 Xcode 生成预览衍生代码文件 Xcode 编译整个项目解析文件、获取预览视图实现、准备依赖的其他资源 Xcode 编译预览衍生代码文件创建动态库 Xcode 启动预览线程在其中加载 _XCPreviewKit 框架和预览衍生文件生成的 dylib XCPreviewKit 框架在预览线程中创建预览窗口 Xcode 通过 XPC 发送消息指令 _XCPreviewKit 框架更新预览窗口并在两个线程建进行交互与同步 用户在 Xcode 界面中看到预览效果
以上就是预览的概念和内部机制的介绍。 参考
https://zhuanlan.zhihu.com/p/631420119
https://www.guardsquare.com/blog/behind-swiftui-previews
