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

这篇具有很好参考价值的文章主要介绍了Xcode 15.0 新 #Preview 预览让 SwiftUI 界面调试更加悠然自得。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

Xcode 15.0 新 #Preview 预览让 SwiftUI 界面调试更加悠然自得,Apple开发入门,swiftui,预览,Preview,Xcode 15,Swift 5.9,Observable,界面调试

概览

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

Xcode 15.0 新 #Preview 预览让 SwiftUI 界面调试更加悠然自得,Apple开发入门,swiftui,预览,Preview,Xcode 15,Swift 5.9,Observable,界面调试

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

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

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


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

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

1. Xcode 15.0 新预览机制简介

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

Xcode 15.0 新 #Preview 预览让 SwiftUI 界面调试更加悠然自得,Apple开发入门,swiftui,预览,Preview,Xcode 15,Swift 5.9,Observable,界面调试

如上所示:我们将 #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 预览内容混合在一起显示:

Xcode 15.0 新 #Preview 预览让 SwiftUI 界面调试更加悠然自得,Apple开发入门,swiftui,预览,Preview,Xcode 15,Swift 5.9,Observable,界面调试

如上所示,为了便于观察我们在 #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))
}

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

Xcode 15.0 新 #Preview 预览让 SwiftUI 界面调试更加悠然自得,Apple开发入门,swiftui,预览,Preview,Xcode 15,Swift 5.9,Observable,界面调试

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.0 新 #Preview 预览让 SwiftUI 界面调试更加悠然自得,Apple开发入门,swiftui,预览,Preview,Xcode 15,Swift 5.9,Observable,界面调试

其原因是:与 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.0 新 #Preview 预览让 SwiftUI 界面调试更加悠然自得,Apple开发入门,swiftui,预览,Preview,Xcode 15,Swift 5.9,Observable,界面调试

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


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

Xcode 15.0 新 #Preview 预览让 SwiftUI 界面调试更加悠然自得,Apple开发入门,swiftui,预览,Preview,Xcode 15,Swift 5.9,Observable,界面调试

  • Swift 语言开发精讲

总结

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

感谢观赏,再会啦!😎文章来源地址https://www.toymoban.com/news/detail-851288.html

到了这里,关于Xcode 15.0 新 #Preview 预览让 SwiftUI 界面调试更加悠然自得的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • xcode15启动IOS远程调试

    1.用数据线连接IPhone到macOS 2.打开xcode15,然后点击Window-Devices and Simulators  3.选中左边的Devices可看到已连接的IPhone,然后点击Connect via network使其选中. 选择后,左边的IPhone设备的右边出现一个地球图标,表示成功通过网络连接到IPhone 现在可断开数据线的连接,至此可以对IPhone设备进行

    2024年02月16日
    浏览(45)
  • 手机升级到iOS15.8后无法在xcode(14.2)上真机调试

     之前手机是iOS14.2的系统,在xcode上进行真机测试运行良好,因为想要使用Xcode的Instruments功能,今天将系统更新到了iOS15.8   ,结果崩了 说是Xcode和手机系统不兼容不能进行真机测试。在网上查了好些方法,靠谱的就是下载相关版本的真机包。但是~~ 找了一圈发现目前并没

    2024年02月04日
    浏览(53)
  • mathcad 15.0安装教程

    PTC Mathcad 15.0 M050安装破解教程 1、在本站下载程序并解压缩后,找到 mathcad 文件夹下的 Mathcad15WixInstaller.msi 程序,双击自动安装 2、返回PTC Mathcad 15.0 M050根目录,双击“setup.exe”程序开始安装 3、点击“下一步” 4、勾选“我接受”,并继续点击“下一步” 5、选择“Mathcad”

    2024年02月02日
    浏览(32)
  • CAD .NET 15.0 企业版 Crack

    CAD .NET 15.0 企业版 企业版 企业版 企业版 企业版 Updated: June 14, 2023 | Version 15.0 NEW CAD .NET  is a library for developing solutions in .NET environment. It supports AutoCAD®  DWG/   DXF ,  PLT  and other CAD formats. The library can be used in a wide range of spheres: work with industrial drawings at all project stages monitoring

    2024年02月14日
    浏览(101)
  • IDEA开启预览选项--enable-preview

    最近在研究loom,我的idea版本是2022.5(2023.1开始支持jdk20,低版本需要自己调) 用到了预览功能 virtualThread报错  is a preview API and is disabled by default. 但是改了sdk到20也一直提示报错 看编译参数是把--source 20 --enable-preview放到了最后(必须放最前面) 解决办法是:   添加VM选项

    2024年02月10日
    浏览(36)
  • FlutKit v15.0 – Flutter UI Kit Crack

    FlutKit  is a nicely designed and developed multi-purpose mobile application UI Kit developed using Flutter. Flutter is an open-source mobile application development SDK created by Google and used to develop applications for Android and iOS. FlutKit  makes it an easy job for developers to have the modern look and feel in the mobile application. It saves lo

    2024年02月09日
    浏览(30)
  • 图片预览插件vue-photo-preview的使用

    移动端项目中需要图片预览的功能,但本身使用mintui,vantui中虽然也有,但是为了一个组件安装这个有点儿多余,就选用了vue-photo-preview插件实现(其实偷懒也不想自己写)。 1、安装 或者用淘宝镜像 2、引入 打开项目中main.js,添加如下代码 注:引入可进行配置,部分常用配

    2024年02月13日
    浏览(37)
  • HFZ Activator Ramdisk绕过iPhone/ipad激活锁,支持最新iOS15.0-iOS16.3

    由HZF团队开发的HFZ Activator Ramdisk 是一款绕过iPhone/ipad激活锁的软件,软件支持最新iOS15.0 -iOS16.3的设备绕过激活锁界面进入系统正常连接WiFi使用,不需要改码,支持完美重启,可以开关机,支持登录iCloud,支持App Store下载软件,Facetime、 Siri 、 iMessage、 消息通知推送。 工具官

    2024年02月04日
    浏览(119)
  • swift - 如何在数组大小更改后刷新 ForEach 显示元素的数量(SwiftUI、Xcode 11 Beta 5)

    我正在尝试实现一个 View ,该 View 可以在内容数组的大小发生变化时更改显示项目的数量(由 ForEach 循环创建),就像购物应用程序可能会在用户下拉刷新后更改其可用项目的数量一样 这是我到目前为止尝试过的一些代码。如果我没记错的话,这些适用于 Xcode beta 4,但适用于

    2024年02月14日
    浏览(40)
  • iPhone 8/8 Plus/X (iOS 15.0~16.6) 在Window 10上进行有根/无根越狱

    A11设备iPhone 8/8 Plus/X (iOS 15.0~16.0) 有根/无根越狱。 1.一台Intel CPU台式或者笔记本电脑。 2.一个64MB或更大容量的闲置移动U盘。 3.抹除手机所有数据和设置,并且不设置锁屏密码。 1.下载启动盘制作工具: Ventoy 2.下载越狱工具: palera1n 1.解压下载好的启动盘制作工具。 2.双击Vento

    2024年02月04日
    浏览(56)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包