首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

构建稳定的预览视图 —— SwiftUI 预览的工作原理

作为 SwiftUI 最引人注目的功能之一,预览功能吸引了不少开发者初次接触 SwiftUI。然而,随着项目规模的增长,越来越多的开发者发现预览功能并不如最初想象的那么易用。...我将通过两篇文章来分享我对预览功能的认知和理解,并探讨如何构建稳定的预览。本文将首先剖析预览功能的实现机制,让开发者了解哪些情况是预览必然无法处理的。...这也是本段代码无法在预览中正常运行的主要原因。 编译器在编译下面的代码时,无法找到 Item 对应的定义,因此导致预览失败。...了解了问题所在,我们还可以使用其他两种方式来解决之前的代码无法在预览中使用的问题。 方法一 将 Item 从 ContentView 中移出来,放置到与 ContentView 同级的代码位置。...通过 XPC 发送消息指令, _XCPreviewKit 框架更新预览窗口,并在两个线程建进行交互与同步 用户在 Xcode 界面中看到预览效果 从预览的实现中可以得到的部分结论 如果项目无法编译,预览也无法正常运行

59010
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    SwiftUI 与 Core Data —— 数据定义

    无需更改代码便可以适应不同的框架( 纯 SwiftUI 驱动、TCA 或其他的 Redux 框架 )所有的视图均可以实现在不使用任何 Core Data 代码的情况下进行预览,并可对 Mock 数据进行动态响应...image-20221128114700448先有鸡还是先有蛋Core Data 通过托管对象的方式来呈现数据( 定义的工作是在数据模型编辑器中进行的 )。...遗憾的是,托管对象对于以值类型为主的 SwiftUI 来说并不算友好,因此,不少开发者都会在视图中将托管对象实例转换成一个结构体实例以方便接下来的操作( 如何在 Xcode 下预览含有 Core Data...对于 SwiftUI 来说,托管对象具备两个非常显著的特点:懒加载托管对象的所谓托管是指:该对象被托管上下文所创建并持有。仅在需要的时候,才从数据库( 或行缓存 )中加载所需的数据。...Core Data 元素的 SwiftUI 视图: https://www.fatbobman.com/posts/coreDataInPreview/#为_SwiftUI_预览提供_Core_Data

    2.5K40

    干货 | 关于SwiftUI,看这一篇就够了

    SwiftUI是一种新颖的构建UI方式和全新的编码风格,本文以通俗易懂的语言,从Swift 5.1语法新特性和SwiftUI的优势方面进行分享,希望对热爱移动端的同学有一定的帮助,让大家尽可能快速、全面和透彻地理解...目前想要体验SwiftUI,需要以下的准备:Xcode 11 beta和macOS Mojave or Higher,如果想要体验实时预览和完整的Xcode 11功能,需要macOS 10.15 beta...本文主要从以下三个方面讲述SwiftUI的特性: 从代码层面理解Swift 5.1新语法的底层实现; 从数据流方面阐述SwiftUI的黑魔法; 从布局原理层面阐述SwiftUI组件化的优势; 二、...SwiftUI内部按上述所说的逻辑,判断对应视图是否需要更新UI,最终再次呈现给用户,等待交互; 以上就是SwiftUI的交互流程,其每一个节点之间的数据流转都是单向、独立的,无论应用程序的逻辑变得多么复杂...在Xcode 11中提供了实时预览和静态预览两项功能,实时预览:代码的修改能够实时呈现在Xcode的预览窗口中;此外,Xcdoe还提供了快捷功能,通过command+鼠标点击组件,可以快速、方便地添加组件和设置组件属性

    10.5K11

    肘子的 Swift 周报 #055| 让技术为我所用,不要被其反噬

    不过,有一点很重要:无论最终呈现了什么样的壮丽、恢弘场景,在哈利·波特电影中,这些特效仍忠实地服务于电影本身,是为了更好地展现剧情,并没有喧宾夺主。...前一期内容|全部周报列表 原创 从基础到进阶:Swift 中的 KeyPath 完全指南[3] Fatbobman(东坡肘子)[4] 在 Swift 的世界里,KeyPath 是一个强大而又常被低估的特性...近期推荐 SwiftUI 工匠之道:视图契约 (SwiftUI Craftsmanship: View Contracts)[5] Danny Bolella[6] 本文是“SwiftUI 工匠之道”...这一设计初衷是通过共享构建产物,加快不同模式之间的切换,并提升预览速度。但在某些情况下(如 List ),这一处理方式可能会阻碍性能优化。...Junping[13] 强调了通过 Inject 实现在 Cursor 中构建类似 Xcode 预览的开发体验[14],展示了如何在新的工作流中替代传统工具。

    3100

    SwiftUI - 百行代码变十行,Swift再创辉煌

    下面来一张牛逼哄哄的SwiftUI效果图,给大家打打牙祭 [1240] 初体验:左边加大括号21行,右边出现一些类似SB的东西,布局UI,设置属性貌似都可以完成 SwiftUI 的特点是什么 SwiftUI...不过,不管是从使用的便利性还是稳定性来说,UIKit 都面临着巨大的挑战。我个人勉强也能算是 iOS开发的“老司机”了,但是掉到 UIKit 的坑里这件事,也几乎还是我每天的日常。...当在设计工具中工作时,所编辑的内容会立刻反映到代码上,如果从模拟器切换到手机,手机也能立马看到预览效果。...[1240] SwiftUI 示例代码 为视图的任何状态声明内容和布局。SwiftUI知道该状态何时发生变化,并更新视图的呈现以匹配该状态。...SwiftUI在需要时自动计算和动画转换。

    2.3K30

    从用SwiftUI搭建项目说起

    SwiftUI我觉得能改变的痛点就是这点,能让我们实时预览自己写的UI效果,保持我们代码和界面的同步性!...从 SwiftUI 谈声明式 UI 与类型系统 跨平台: 在最新的swiftUI 5.1中,我们创建一个MultilPlatform App有了下面这些区别: ·Before func...BaseTabbarView() } } 从最常见的场景搭建开始 ---- 在我们的日常开发中,标签(TabBar)+ 导航(Na)形式的模式是随处可见的,我们这次的目的是利用SwiftUI...在UIKit中我们的导航、标签都是通过控制器来管理,但是在SwiftUI中他们分别是通过NavigationView+TabView管理的,我们得在认识上有一个基本的转变,从Controller到View...下面的参考文章相信能帮助我们更好的理解一下,SwiftUI! 参考文章: Apple SwiftUI 从 SwiftUI 谈声明式 UI 与类型系统 如何评价 SwiftUI? 项目地址

    4.5K20

    SwiftUI 与 Core Data —— 数据获取

    不过考虑到 TCA 在之后会将 Reducer 移出主线程,从线程安全的角度出发,最终放弃了该方案。...通过新创建一个可以使用 Mock 数据的 FetchRequest ,实现了 SwiftUI 与 Core Data —— 问题[6] 一文中提出的可测试、可预览、可模块化的目标。...方法的具体细节,开发者无法自行向 SwiftUI 申请数据保存地址,但可以通过在自定义的类型中( 符合 DynamicProperty 协议 )使用系统提供的符合 DynamicProperty 协议的类型...MockableFetchRequest 则为一个获取数据集的视图提供了无需托管环境预览一组数据的能力。...self 的问题在订阅闭包中使用底层数据,如此就可以绕过无法在结构体中引入 self 的问题。

    4.7K30

    肘子的 Swift 周报 #015 | 新框架、新思维

    由于版本限制,未来一段时间许多开发者仍将无法体验像 Observation、SwiftData 这样的革命性框架所带来的便利和开发思维上的转变,这是非常遗憾的一点。...,对于减少 SwiftUI 重绘的显著改进。...这样的层次结构营造出了立体效果,使得用户在观看图标时,图标能够通过非背景层的 alpha 通道微妙地膨胀,进而呈现出凸显的视觉效果。...例如,文章特别指出了一个常见问题:在启用 ProRAW 格式进行拍照后,预览图像可能会在垂直方向上轻微偏移。...文章中,作者详尽地介绍了这一工具的技术实施方案,涵盖了从文本文件检测、分句处理到词语检测和整体工具集成的各个环节。

    14210

    百行代码变十行,苹果SwiftUI可视化编程让开发者惊呼完美

    当我们修改预览(preview)时,对应代码可实时生成,也就是说我们对预览修改的内容能实时体现在代码中。Xcode 会立即重新编译你的修改,并将它们插入到 APP 的运行版中。...因此在整个开发中,预览可视化与代码可编辑性能同时支持并交互。 ? 如上所示为 SwiftUI 的代码与预览部分,它们之间是可以实时交互的。...我们可以从库中拖拽控件,再放入到设计面板或代码面板都是可以的。 动态替换:Swift 编译器和运行时可以完全嵌入到 Xcode 中,所以我们的 APP 会一直处于构建和运行的状态。...预览:现在,我们可以创建任何 SwiftUI 视图的一个或多个预览,从而得到样本数据,并配置几乎用户能看到的所有内容,例如大字体、定位或「暗黑模式」等。...预览还能在任何设备上以任何朝向展示我们的 UI。

    4.1K10

    Xcode 11 初体验

    、storyboad其中我有两篇博客也介绍到了SwiftUI:SwiftUI - 百行代码变十行,Swift再创辉煌 和 WWDC - SwiftUI - 初恋般的感觉 代码块 代码块也做了调整,界面漂亮直观...Editor and Canvas:代码编辑器和SwiftUI预览视图。 Editor and Assistant:代码编辑器和辅助视图。...其中说明一下:SwiftUI 预览 系统最低要求macOS 10.15 Add Editor 提供了编辑窗口的任意切割功能 可以指定文件打开的位置。...SceneDelegate 更新 Apple 建议我们把视图层级相关的方法从 didFinishLanchingWithOptions 迁移到 SceneDelegate 中的 willConnectTo...这样做有两个好处: 首先可以提高预览结果呈现的速度 其次在应用进入后台时,不会做一些额外的操作,只会做一些必要的操作,使应用快速进入睡眠状态,以节省耗电.

    3.2K10

    Airbnb 的三阶段 SwiftUI 迁移实践

    作者 | Sergio De Simone 译者 | 明知山 策划 | 丁晓昀 从 2022 年开始,Airbnb 的 iOS 团队就认为 SwiftUI 已经足够成熟,可以在他们的官方应用中使用它...Airbnb 工程师做出的另一个决定是将 Epoxy 的单向数据流应用到 SwiftUI,将 ObservableOject 作为状态类的基础,在每次状态变化时触发 SwiftUI 重新渲染。...他们的新 SwiftUI 实现需要能够很好地适应他们的快照测试方法。...为此,他们为每个定义的视图变体起了一个名字,以便与他们的快照测试服务一起使用,并让所有视图变体遵循 Xcode 的 PreviewProvider 协议,以便使用 Xcode 预览。...关于 Airbnb 采用 SwiftUI,这里无法全部概述,所以请不要错过原文的内容和一些有用的代码片段。

    22710

    SwiftUI 在 WWDC 24 之后的新变化

    每年,SwiftUI 都会通过引入更多功能来赶上 UIKit。今年也不例外。让我们深入了解 SwiftUI 框架引入的新功能。...新的标签栏体验使用新的 Tab 类型,SwiftUI 提供了新的可定制标签栏体验,带有流畅过渡到侧边栏。...extension EnvironmentValues { @Entry var itemsPerPage: Int = 10}预览新的 Previewable 宏允许我们在预览中引入状态,而无需将其包装到额外的包装视图中...框架的下一版本包括许多新 API,如窗口推送、TextField 和 TextEditor 视图中的文本选择观察、搜索焦点监控、自定义文本渲染、新的 MeshGradient 类型等等,我无法在一篇文章中涵盖所有内容...总结在 WWDC 24 上,SwiftUI 再次通过引入更多新功能来提升其成熟度,以赶上 UIKit。

    16910

    苹果全新UI框架来了!可视化编程,自动化减少20%代码量

    那么,SwiftUI解决了哪些痛点?带来哪些好处?代码风格如何?敬请阅读本文。 刚刚结束的苹果WWDC推出了一个对于开发者非常重要的框架:SwiftUI。...而SwiftUI通过4种方式,解决了上述问题: 用一个新的声明式UI结构,定义了的布局的外观和工作方式 更新UI预览会自动生成新的Swift代码,反之,更改Swift代码也会更新UI预览 Swift中的任何绑定例如有效的...让Xcode for iPad更上一层楼 开发者对Interface Builder的抱怨不是一天两天了,它大大增加了分解视图块以及从视图控制器(view controller)使用视图的工作量,导致出现体积臃肿的视图控制器...感受一下SwiftUI的代码风格 ? Github一个repo整理了在WWDC 2019发布的SwiftUI布局框架的一些官方示例: SwiftUI Essentials 创建和组合视图: ?...比如,它只支持Swift,你不能在Obj-C里使用SwiftUI;SwiftUI目前还不是很成熟,正在从事iOS开发的程序员可能更应该继续使用Obj-C,直到SwiftUI足够成熟。

    5.4K20

    肘子的 Swift 周报 #027 | 苹果助你成为一日“百万富翁”

    我们不仅会详细描述这一问题的表现,还将分享从发现到诊断,最终解决问题的全过程。通过这一探索,旨在为遇到类似挑战的开发者提供一个指引,以帮助他们更好应对其他的 SwiftUI 开发难题。...重构的结果令 Ryan 非常满意,尽管应用的包大小有所增加,但构建性能和 SwiftUI 预览方面均获得了显著提升。他希望这篇文章能为其他开发者在进行类似重构时提供启示和帮助。...在本文中,Alexander 介绍了如何解决使用 Xcode 预览时常见的问题,并建立一个有效的预览环境。...若要深入了解 Preview 功能的更多细节和技术背景,建议阅读 Behind SwiftUI Previews[14] 和 构建稳定的预览视图 —— SwiftUI 预览的工作原理[15]。...Previews: https://t.ly/9m_i3 [15] 构建稳定的预览视图 —— SwiftUI 预览的工作原理: https://fatbobman.com/zh/posts/how-swiftui-preview-works

    14610

    掌握 ViewThatFits

    ViewThatFits 的判断和呈现逻辑 既然 ViewThatFits 是从给定的视图中挑选出最合适的那个,那么它的判断依据是什么呢?判断的顺序如何?最终又如何呈现呢?...在 SwiftUI 中,我们可以通过 fixedSize 来强制一个视图以理想尺寸进行呈现: struct IdealSizeDemo: View { var body: some View {...在 SwiftUI 中,我们可以通过 frame 来修改视图在理想状态下的呈现。...选择合适长度的文本 这也是 ViewThatFits 最常被使用的场景,从提供的一组文本中,找出最适合当前空间的那个。...在本文中,我们对 SwiftUI 中的 ViewThatFits 容器进行了深入的探索。从基本定义到复杂的布局机制,我们试图揭示这个强大工具背后的逻辑和潜力。

    23810

    SwiftUI geometryGroup() 指南:从原理到实践

    在 WWDC 2023 中,苹果为 SwiftUI 添加了一个新的修饰器:geometryGroup()。它可以解决一些之前无法处理或处理起来比较困难的动画异常。...In Some Cases 为了更好地理解 geometryGroup() 的实际作用,我们需要创建一个因父视图的几何属性发生变化而导致的非预期的子视图呈现,以便弄清楚文档中的“在某些情况下”到底指的是什么情况...在创建黄色圆形时,它无法获得状态改变前的 topLeading 位置信息,因此无法满足我们的要求。 本节涉及到 transaction 以及 SwiftUI 动画的一些内部运行机制。...} } .clipped() } } 小插曲 在写这篇文章时,我创建了一个更加简单的代码,结果也出现了非预期的呈现...从代码来看,Text(toggle ? "Hello" : "World") 应该能够保持一个视图标识的稳定(也就是不应该创建新的 Text)。

    29910
    领券