Xcode 15.0 新 #Preview 预览让 SwiftUI 界面调试更加悠然自得

在这里插入图片描述

概览

从 Xcode 15 开始,苹果推出了新的 #Preview 宏预览机制,它无论从语法还是灵活性上都远远超过之前的预览方式。#Preview 不但可以实时预览 SwiftUI 视图,而且对 UIKit 的界面预览也是信手拈来。

在这里插入图片描述

想学习新 #Preview 预览的一些超实用调试小妙招吗?那就“如意如意”随小伙伴们的心意吧!

在本篇博文中,您将学到如下内容:

  • 概览
  • 1. Xcode 15.0 新预览机制简介
  • 2. #Preview 让状态初始化如此轻松!
  • 3. 为什么 #Preview 中不能直接嵌入可变状态?
  • 4 #Preview + @Observable 宏构造可变 @Binding 实参
  • 总结

相信学完本课后,大家对于 Xcode 15+ 预览的使用以及 SwiftUI 界面调试会更加的轻车熟路!

那还等什么呢?让我们马上开始吧!Let‘s preview!!!😉


本文对应的视频课在此,欢迎恣意观赏 😃

Xcode 15.0新 #Preview 预览让调试悠然自得

1. Xcode 15.0 新预览机制简介

从 Xcode 15 开始,苹果借助于 Swift 5.9 宏(Macro)的“东风”,也为我们带来了全新的 #Preview 预览机制。你猜的没错,它其实就是一个宏:

在这里插入图片描述

如上所示:我们将 #Preview 宏定义展开为了其原始代码的实现,大家可以清楚的看到 #Preview 宏背地里到底做了些神马。

在 Xcode 15 之前,小伙伴们需要使用遵循 PreviewProvider 协议的 Previews 结构来帮助我们预览指定的 SwiftUI 视图:

struct LaunchView_Previews: PreviewProvider {static var previews: some View {LaunchView().environmentObject(Model())}
}

而现在,只需一个 #Preview 即可搞定所有,岂不呜呼快哉:

#Preview {LaunchView().environmentObject(Model())
}

为了方便起见,我们还可以非常 nice 的将多个定制的 #Preview 预览内容混合在一起显示:

在这里插入图片描述

如上所示,为了便于观察我们在 #Preview 中指定了不同预览名称以及预览设备的方向和明暗主题等特性,简直小菜一碟。

2. #Preview 让状态初始化如此轻松!

“理想很骨感,现实却很残酷”。

在实际开发中,不可能所有视图都如此简单。在现实的 App 中视图多半都会与模型(数据)相绑定,这意味着我们在预览它们之前需要创建对应的数据,否则预览就不会达到预期效果,显示将是一片“空空如也”。

比如在 SwiftUI 里我们有一个分类选择视图(V2_ChallengeClassSelectView),所有内置(Built in)的分类都是从数据库中读取的,但前提是我们在数据库中已经初始化了这些分类,这是通过调用如下方法来完成的:

V2_ChallengeClassification.initializeData()

所以,我们可能会写出下面的代码以期待 #Preview 预览可以正常工作:

@available(iOS 17.0, *)
#Preview {V2_ChallengeClassSelectView(selecting: .constant(nil)).onAppear {try? V2_ChallengeClassification.initializeData()}
}

不过可惜的是,以上实现无法得偿所愿。原因是我们 V2_ChallengeClassSelectView 视图中的分类数据必须在其 body 显示之前就准备就绪:

@available(iOS 17.0, *)
struct V2_ChallengeClassSelectView: View {@Binding var selecting: V2_ChallengeClassification?let builtInClasses = try? V2_ChallengeClassification.allBuiltInClassifications()
}

对于这种情况,#Preview 宏有一个非常简单的解决方案:我们只需在预览内容之前直接调用初始化代码即可:

@available(iOS 17.0, *)
#Preview {try? V2_ChallengeClassification.initializeData()return V2_ChallengeClassSelectView(selecting: .constant(nil))
}

运行可以看到,我们已经能够在预览中正确显示初始化之后的所有内置分类了:

在这里插入图片描述

3. 为什么 #Preview 中不能直接嵌入可变状态?

大家可能已经发现了,上面示例中的 V2_ChallengeClassSelectView 视图包含一个 selecting 绑定状态:

struct V2_ChallengeClassSelectView: View {   @Binding var selecting: V2_ChallengeClassification?
}

但在我们的预览中,为了“偷懒”实际向其传入的是一个绑定常量:

V2_ChallengeClassSelectView(selecting: .constant(nil))

这样做的后果是:我们无法在预览中改变 selecting 属性的值,也就无法观察到视图中选择所产生的变化了。

小伙伴们可能会觉得,下面的实现可以帮我们摆脱这一问题:

@available(iOS 17.0, *)
#Preview {@State var selecting: V2_ChallengeClassification?try? V2_ChallengeClassification.initializeData()return V2_ChallengeClassSelectView(selecting: $selecting)}

遗憾的是这样做“然并卵”,毫无用处:

在这里插入图片描述

其原因是:与 Xcode 15 之前的旧预览机制类似,嵌入在预览结构中的简单状态实际上是无法被改变的,即使它被 @State 等(可变)限定符所修饰时也是如此。

那么我们如何解决呢?

答案很简单:将可变状态放到 #Preview 外面去!

4 #Preview + @Observable 宏构造可变 @Binding 实参

从 Xcode 15 (Swift 5.9)开始,苹果推出了新的 @Observable 宏帮我们便捷的创建可观察对象。


更多关于 @Observable 宏以及 Observation 框架的详细介绍,小伙伴们可以移步到下面的博文中进一步观赏:

  • Swift 5.9 与 SwiftUI 5.0 中新 Observation 框架应用之深入浅出
  • Swift 5.9 新 @Observable 对象在 SwiftUI 使用中的陷阱与解决

简单来说,我们可以在 #Preview 之外利用 @Observable 宏包裹我们的可变状态,从而可以将其通过绑定传入到对应的视图中去:

@available(iOS 17.0, *)
@Observable
class PreviewModel {var selecting: V2_ChallengeClassification?
}@available(iOS 17.0, *)
#Preview {@State var model = PreviewModel()try? V2_ChallengeClassification.initializeData()return V2_ChallengeClassSelectView(selecting: $model.selecting)
}

注意,在上面的代码示例中我们实际向 V2_ChallengeClassSelectView 视图传递的绑定是 @Observable 可观察对象 model 中的属性。虽然 model 作为 @State 放在了预览内部,不过由于它是一个可观察对象,所以它仍然可以变化自如。

编译运行修改后的代码,我们现在可以在 #Preview 预览界面中顺畅自如的测试 selecting 分类属性改变时的显示逻辑了:

在这里插入图片描述

至此,我们通过上面几个小“栗子”对 Xcode 15 中新的 #Preview 预览机制又有了更深刻的领悟,小伙伴们还不赶快给自己点一个大大的赞吧!👍🏻


想要系统学习 Swift 语言的小伙伴们,千万不要错过我的《Swift 语言开发精讲》专栏哦:

在这里插入图片描述

  • Swift 语言开发精讲

总结

在本篇博文中,我们介绍了 Xcode 15+ 中新的 #Preview 预览机制,并讨论了如何利用 #Preview + @Observable 宏让 SwiftUI 界面调试更加“如虎添翼”。

感谢观赏,再会啦!😎

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/816076.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

使用新一代一站式 AI Bot 开发平台扣子coze,搭建我的第一个AI Bot(前端魔法师) ,

目录 1.概述​ 2.功能与优势 3.使用扣子 4.人设与回复逻辑 5.添加插件 6.预览与调试 7.发布bot Store 8.环境大家体验(给大家内置了比较屌的插件) 9.推荐阅读: 1.概述​ 扣子是新一代一站式 AI Bot 开发平台。无论你是否有编程基础…

揭示API威胁的攻击趋势(下)

文章目录 前言三、行业趋势凸显供应链攻击危险1、案例研究2、API成为新的数据泄露载体四、提高可见性:管理API资产生命周期的关键1、照亮阴影2、实现文档化3、强化API态势4、加强威胁检测和响应5、发展更强大的进攻性方法前言 API是组织数字化转型的核心。然而,API的存在也增…

iOS------SDWebImage源码

一,简介 一个异步图片下载及缓存的库 特性: 一个扩展UIImageView分类的库,支持加载网络图片并缓存图片异步图片下载器异步图片缓存和自动图片有效期限管理支持GIF动态图片支持WebP背景图片减压保证同一个URL不会再次下载保证无效的URL不会…

Web前端 Javascript笔记3

1、垃圾回收机制 内存中的生命周期 1、内存分配 2、内存使用(读写) 3、内存回收,使用完毕之后,垃圾回收器完成 内存泄漏:该回收的,由于某些未知因素,未释放,叫做内存泄漏 栈&#xf…

构建CICD

由于公司要求构建自己的CICD流程,基于公司内部搭建的服务平台去搭建自动打包流程,在这个过程中遇到了几个节点记录一下。 公司内部号称有自己的一套软管平台,实际内核都是基于Jekins的一套机制,不同的是有些参数可以自定义&#…

leetcode46--全排列

题目 给定一个不含重复数字的数组 nums ,返回其 所有可能的全排列 。你可以 按任意顺序 返回答案。 示例 1: 输入:nums [1,2,3] 输出:[[1,2,3],[1,3,2],[2,1,3],[2,3,1],[3,1,2],[3,2,1]]示例 2: 输入:…

Vue新手入门

1 Vue概述 官网:https://cn.vuejs.org/ 1、什么是Vue.js Vue.js 是目前最火的一个前端框架,React是最流行的一个前端框架(React除了开发网站,还可以开发手机App, Vue语法也是可以用于进行手机App开发的,需要借助于W…

C语言数组的初始化方法大全

在C语言中,数组初始化主要有以下几种方法: 1.完全初始化:在声明数组的同时给出数组所有元素的值。 int arr[5] {1, 2, 3, 4, 5}; // 初始化一个整型数组 2.部分初始化:只给数组的前面一部分元素赋值&am…

Bridge 桥接

意图 将抽象部分与其显示部分分离,使他们都可以独立地变化。 结构 其中: Abstraction定义抽象类的接口,维护一个指向Implementer类型对象的指针。RefinedAbstraction扩展由Abstraction定义的接口。Implementor定义实现类的接口&#xff0c…

React 19 的新增功能:Action Hooks

React 是前端开发领域最流行的框架之一。我喜欢 React 是因为它背后的团队和社区对它的热情。当社区提出新功能和改进的需求时,团队会倾听,React 的未来是令人兴奋和有趣的。 让我们来看一下 React 19 中令开发人员提升开发效率的新特性。对于每个钩子&…

关于项目打包

除了自己常用的那种方式,也可以直接在文件夹下执行命令。 如果当前项目聚合了其他子模块的话: 先清理,再打包,同时跳过测试 如果打包后,然后项执行某个模块,进入当前文件夹下直接java -jar 和jar包名执行就…

C++中的vector容器

一. 基本概念 1. 包含在头文件 #include <vector> 2. 功能: 模拟了一个动态数组 3. 底层实现 首先开辟一定大小的数组 随着元素的增加&#xff0c;如果空间不够之后 自动采取扩容机制 -> 自增长 扩容规则&#xff1a;以原空间大小的 2 倍重新开辟一块空间 将就空…

【SpinalHDL】Scala编程中的class及case class

本篇文章仅简单介绍在spinalhdl编程中遇到的比较常见的2中类定义方式&#xff1a;class及case class。对于不太了解JAVA或Scala编码又开始学习SpinalHDL的人进行入门介绍。 在 SpinalHDL 中&#xff0c;case class 和 class 都是用来定义数据结构或对象的关键字&#xff0c;它…

第五十二章 进程亲和性和状态感知模式(保留模式 1) - 启动状态感知模式

文章目录 第五十二章 进程亲和性和状态感知模式&#xff08;保留模式 1&#xff09; - 启动状态感知模式维护状态感知模式并响应错误终止状态感知模式 第五十二章 进程亲和性和状态感知模式&#xff08;保留模式 1&#xff09; - 启动状态感知模式 通过设置保留模式将会话标记…

k8s:kubectl 命令设置简写启用自动补全功能

k8s&#xff1a;kubectl 命令设置简写&启用自动补全功能 1、设置kubectl命令简写2、启用kubectl自动补全功能 &#x1f496;The Begin&#x1f496;点点关注&#xff0c;收藏不迷路&#x1f496; Kubernetes&#xff08;K8s&#xff09;是一个强大的容器编排平台&#xff0…

恢复MySQL!是我的条件反射,PXB开源的力量...

&#x1f4e2;&#x1f4e2;&#x1f4e2;&#x1f4e3;&#x1f4e3;&#x1f4e3; 哈喽&#xff01;大家好&#xff0c;我是【IT邦德】&#xff0c;江湖人称jeames007&#xff0c;10余年DBA及大数据工作经验 一位上进心十足的【大数据领域博主】&#xff01;&#x1f61c;&am…

[leetcode 链表] 反转链表 vs 链表相交

1. 反转链表 E :::details 给你单链表的头节点 head &#xff0c;请你反转链表&#xff0c;并返回反转后的链表。 示例 1&#xff1a; 输入&#xff1a;head [1,2,3,4,5] 输出&#xff1a;[5,4,3,2,1] 示例 2&#xff1a; 输入&#xff1a;head [1,2] 输出&#xff1a;[2,1]…

【设计模式】SOLID设计原则

1、什么是SOLID设计原则 SOLID 是面向对象设计中的五个基本设计原则的首字母缩写&#xff0c;它们是&#xff1a; 单一职责原则&#xff08;Single Responsibility Principle&#xff0c;SRP&#xff09;&#xff1a; 类应该只有一个单一的职责&#xff0c;即一个类应该有且只…

js和ES的关系

ES和JS之间的关系是&#xff1a;ES&#xff08;ECMAScript&#xff09;是JS&#xff08;JavaScript&#xff09;的一个规范或者标准&#xff0c;而JS则是ES的实现。具体来说&#xff0c;JavaScript 是一种在浏览器中运行的脚本语言&#xff0c;用于实现网页的交互功能。而 ECMA…

力扣面试150 分发糖果 分步贪心

Problem: 135. 分发糖果 思路 &#x1f468;‍&#x1f3eb; 参考&#xff1a;代码随想录 一次是从左到右遍历&#xff0c;只比较右边孩子评分比左边大的情况。一次是从右到左遍历&#xff0c;只比较左边孩子评分比右边大的情况。 复杂度 时间复杂度: O ( n ) O(n) O(n) …