欢迎大家在 Discord 频道[2] 中进行更多地交流将某个视图在父视图中居中显示是一个常见的需求,即使对于 SwiftUI 的初学者来说这也并非难事。...在 SwiftUI 中,有很多手段可以达成此目的。本文将介绍其中的一些方法,并对每种方法背后的实现原理、适用场景以及注意事项做以说明。...因此在第一个例子中,即使没有为 HStack 设置 spacing ,Text 仍然会使用全部的 HStack 宽度。...().fill(.clear)在使用 SwiftUI 进行开发的过程中,Color、Rectangle 等经常被用来实现对容器的等分操作。...我为本文这种通过多种方法来解决一个问题的方式添加了【小题大作】标签,目前使用该便签的文章还有:在 Core Data 中查询和使用 count 的若干方法[6]、在 SwiftUI 视图中打开 URL
今天,我们将了解 SwiftUI 引入的新内容边距概念以及它与安全区域的区别。创建示例让我们从一个简单的示例开始,演示带有一百个项目的列表。...在使用 UIKit 时,我们可以访问 readableContentGuide 布局指南。从字面上看,它是另一个安全区域,适应屏幕大小,但仅适用于文本内容。...不幸的是,我们在 SwiftUI 中无法访问 readableContentGuide。...例如,它可以是 scrollContent,正如我们在示例中所做的那样。另一个选项是 scrollIndicators,它仅移动指示器。...随后,通过介绍 UIKit 中的 readableContentGuide 布局指南以及 SwiftUI 中的 safeAreaPadding 视图修饰符,展示了在 iPad 上适配内容边距的方法。
SwiftUI 采用了声明式语法来描述不同状态下的 UI 呈现,动画亦是如此。官方文档将 SwiftUI 的动画(Animations)定义为:创建从一个状态到另一个状态的平滑过渡。...在 SwiftUI 中,我们不能命令某个视图从一个位置移动到另一个位置,为了实现上述效果,我们需要声明该视图在状态 A 时所处的位置以及状态 B 时所处的位置,当由状态由 A 转到 B 时,SwiftUI...状态、视图标识、动画 既然 SwiftUI 的动画是创建从一个状态到另一个状态的平滑过渡,那么我们必须对状态(依赖项)的改变可能导致的结果有正确的认识。...由于两个分支视图在转场时会同时出现,因此只有在布局容器中才会正确的处理转场动画。Group 只能对其子元素进行统一设置,不具备处理两个分支视图同时出现的情况(会有一个视图分支的转场丢失)。...总结 动画是创建从一个状态到另一个状态的平滑过渡 声明一个动画需要三要素 掌握状态的变化所能导致的结果 —— 同一个视图的不同状态还是不同的视图分支 时序曲线函数与依赖的关联越精准,产生异常动画的可能性就越小
本文将通过一个优化列表视图的案例,展现在 SwiftUI 中查找问题、解决问题的思路,其中也会对 SwiftUI 视图的显式标识、@FetchRequest 的动态设置、List 的运作机制等内容有所涉及...找寻问题原因 或许有人会认为,毕竟数据量较大,进入列表视图有一定的延迟是正常的。但即使在 SwiftUI 的效能并非十分优秀的今天,我们仍然可以做到以更小的卡顿进入一个数倍于当面数据量的列表视图。...在 SwiftUI 视图的生命周期研究[3] 一文中,我对 List 如何对子视图的显示进行优化做了一定的介绍。...在 SwiftUI 中为视图设置显式标识目前有两种方式: 在 ForEach 的构造方法中指定 由于 ForEach 中的视图数量是动态的且是在运行时生成的,因此需要在 ForEach 的构造方法中指定可用来标识子视图的...我们将通过 SwiftUI-Introspect[7] 来实现在 List 中滚动到列表两端。
在 SwiftUI 中,除了环境值外,另一个具备较多平台“限制”的部分就是视图的 Modifier。...盲目地使用这些解决兼容性的代码可能会破坏 SwiftUI 创建者的苦心,让开发者无法准确地体现不同平台的特色。数据源聊完兼容性后,我们再聊另一个在构建多平台应用初期容易忽略的问题:数据源(数据依赖)。...图片图片不过,这种在每个场景中创建独立的 Store 实例的方式并非适用于所有情况。在很多情况下,开发者只想在应用中保持一个 Store 实例。我将通过另一个简单的应用来展示这种场景。...在 SwiftUI 中,只要理解了状态、声明和响应之间的关系,开发者就可以用任何想用的形式来组织数据。无论是将状态进行统一管理,还是分散在不同的视图中,都有各自的优势和意义。...为了让“电影猎手”更符合 macOS 应用的规范,我们将视图移动到菜单项中,并在 mac 代码中取消了 TabView。
在 SwiftUI 中,除了环境值外,另一个具备较多平台“限制”的部分就是视图的 Modifier。...数据源 聊完兼容性后,我们再聊另一个在构建多平台应用初期容易忽略的问题:数据源(数据依赖)。...在很多情况下,开发者只想在应用中保持一个 Store 实例。我将通过另一个简单的应用来展示这种场景。 我想很多读者此时都不会太赞同在每个场景中创建一个独立的 Store 实例这种做法。...在 SwiftUI 中,只要理解了状态、声明和响应之间的关系,开发者就可以用任何想用的形式来组织数据。无论是将状态进行统一管理,还是分散在不同的视图中,都有各自的优势和意义。...为了让“电影猎手”更符合 macOS 应用的规范,我们将视图移动到菜单项中,并在 mac 代码中取消了 TabView。
在visionOS中,您可以在同一个场景中包含2D和3D视图,并且可以将这些视图呈现在窗口中或作为人的周围环境的一部分。...点击并拖动应用程序内容下方的窗口栏,以重新定位窗口在环境中的位置。将指针移动到窗口栏旁边的圆圈上,显示窗口的关闭按钮。将光标移动到窗口的一个角落,以将窗口栏变为调整大小控件。...下面的例子展示了一个使用RealityView来显示3D球体的视图。视图闭包中的代码为球体创建一个RealityKit实体,在球体表面应用纹理,并将球体添加到视图的内容中。...当指定的手势发生在实体上时,SwiftUI执行提供的闭包。 下面的示例将一个点击手势识别器添加到上一个示例中的球体视图中。...要创建一个volume,添加一个WindowGroup场景到你的应用程序,并将其样式设置为volumetric。这个样式告诉SwiftUI为3D内容创建一个窗口。在卷中包含您想要的任何2D或3D视图。
SwiftUI 中,Button 默认的交互行为是在松开按钮的同时执行 Button 指定的操作。...并且,在点击按钮后,只要手指( 鼠标 )不松开,无论移动到哪里( 移动到 Button 视图之外 ),松开后仍会执行指定操作。...而 TapGesture 在不松开手指的情况下,如果移动到可点击区域外,SwiftUI 将不会调用 onEnded 闭包中的操作。...假如,我们想达成与 TapGesture 类似的效果( 可撤销按钮 ),则可以通过 SwiftUI 提供的另一个协议 PrimitiveButtonStyle 来实现。...默认情况下,即使单元格的视图中包含了多个按钮,SwiftUI 也只会将 List 的单元格视作一个按钮( 点击后同时调用所有按钮的操作 )。
第一轮优化:对视图 body 值进行优化 在第一轮优化中,我们会首先尝试从 SwiftUI 的角度入手。...在正常的情况下( 惰性容器中仅包含一个 ForEach ,且子视图没有使用 id 添加显式标识 ),惰性容器仅会创建当前可见范围内的子视图实例,并对其 body 进行求值( 渲染 )。...由于一个协调器可以对应多个上下文,如果在另一个上下文中,指向同一个图片的另一个托管对象也进行了填充,那么就又会多出一个 Copy 不成功的优化 在首轮优化后的代码基础上,做如下添加: .onDisappear...根据上述原理,我们将尝试如下过程: 在 onAppear 的闭包中,通过私有上下文创建一个 Picture 对象 将 data 属性的数据转换成 Image,并保存在视图中的一个 Source of truth...图片 可以加大检测力度,即使在生成了 400 条记录的情况下,内存占用也仍然被控制在一个相当理想的状态( 下图为 400 条数据滚动到底部的内存占用情况 )。
一个内存占用量巨大的 App 本节中,我们将创建一个在 List 中对 Core Data 数据进行浏览的演示 App。...第一轮优化:对视图 body 值进行优化 在第一轮优化中,我们会首先尝试从 SwiftUI 的角度入手。...在正常的情况下( 惰性容器中仅包含一个 ForEach ,且子视图没有使用 id 添加显式标识 ),惰性容器仅会创建当前可见范围内的子视图实例,并对其 body 进行求值( 渲染 )。...由于一个协调器可以对应多个上下文,如果在另一个上下文中,指向同一个图片的另一个托管对象也进行了填充,那么就又会多出一个 Copy 不成功的优化 在首轮优化后的代码基础上,做如下添加: .onDisappear...根据上述原理,我们将尝试如下过程: 在 onAppear 的闭包中,通过私有上下文创建一个 Picture 对象 将 data 属性的数据转换成 Image,并保存在视图中的一个 Source of truth
前言 List 可能是 SwiftUI 附带的内置视图中最常用的一种,它使我们能够在任何 Apple 平台上呈现“类似于表格视图”的用户界面。...使用新速记语法 让我们从一个很小的特性开始,这是一个非常受欢迎的变化,可以使用类似 enum 的速记语法来引用 SwiftUI 附带的任何内置 ListStyle 类型。...为了演示这种情况,我们在 List 中嵌套一个 ForEach (因为在 SwiftUI 的中,列表变化一版都是由 ForEach 触发的,而不是由 List 触发的)。...然后,让我们使用另一个新功能,集合元素绑定,让系统自动为我们的 articles 数组中的每个元素创建一个可变绑定: struct ArticleList: View { @ObservedObject...可定制的分隔符 自从引入 SwiftUI 以来,开发者们有一个非常普遍的要求,提供一个 API ,用于隐藏或以其他自定义实现列表中每个 item 之间的默认分隔符。
两者之间的唯一区别是,一个写在内容闭包中,而另一个被放在单独的视图中以提高可读性。...为什么左边的 emoji 会变,而另一个总是悲伤?事实证明, SubView 没有接收到任何变化的参数,这意味着它没有依赖关系。SwiftUI 没有理由重新计算视图的主体。...笔者将在本节中介绍的技术,使用我们已熟知的动画并且热衷于视图动画从一个时间线更新到下一个时间线。这最终将让我们在纯 SwiftUI 中创建我们自己的类似关键帧的动画。...使用 onChange 和 onAppear 推进动画,使用 @State 变量来跟踪动画,并设置一个动画,将我们的视图从一个时间线更新过渡到下一个。...在这种情况下,我们只需封装内容并将标志变量移动到封装的视图内。
这意味着我们不能使用 LazyVStack,或任何其他将选择与详细视图绑定的自定义视图。有扩展这个功能的计划吗?A:在 iOS 16.1 中,你可以在侧边栏里放一个。...macOS APIQ:对于运行 Monterey 的 Mac,能否如何在 SwiftUI 中实现下面需求的建议:打开一个窗口在该窗口中初始化数据找到所有打开的窗口确定一个窗口是否打开从不在该窗口的视图中关闭一个窗口...连锁动画Q:在 SwiftUI 中,如何实现连锁动画?例如,我想先给一个视图做动画,当动画完成后立即启动另一个动画。A:不幸的是,目前不可能实现连锁动画。...Too complex to type checkQ:我在 iOS 14 SwiftUI 中遇到一个问题,我试图有条件地显示 3 个符合 Shape 协议的对象中的一个。...在 SwiftUI 中,有一个从第一版开始就存在但尚未公开的纯 SwiftUI 实现的滚动容器 —— _ScrollView 。
这是个老问题,我在 SwiftUI 刚发布的时候就写过此类问题,在 Safely Updating The View State [1] 一文中可以查看更多信息。 我还想再提一下潜在的崩溃。...在这个例子中在容器中一共有44个视图,所以我们的新容器将会分别以12,12,12和8为一圈。 注意本案例中如何使用缓存与子视图通信。...在下一个例子中我们将会把前三个视图水平的放置在视图顶部,后三个水平的放置在底部。剩下的视图将会在中间,垂直排列。...另一个组合案例:插入两个布局 下一个例子将会创建一个以轮子,或者波浪形式显示视图的布局。...在本例中,我创建了两个 UUID 布局值,一个标识视图,另一个作为父视图的 ID。
将可滚动容器内的所有子视图视为一个整体,并为其添加 margin。之前在 List 或 TextEditor 中实现类似操作是十分困难的。...可采用 优化在 SwiftUI List 中显示大数据集的响应效率[5] 一文中介绍的方式来解决。 scrollPostion(id:) 使用此修饰符可以让滚动视图滚动到特定的位置。...(视图标识) 不支持锚点设定,固定锚点为子视图的 center 正如 优化在 SwiftUI List 中显示大数据集的响应效率[6] 一文所提到的,当数据集很大时,也会出现性能问题。...通过这个坐标系,开发者可以非常容易地获取子视图与滚动视图之间的位置关系。利用这些信息,我们可以轻松地实现很多效果,尤其是配合另一个新 API,visualEffect 修饰符。...苹果为我们提供了另一个 API,可以简化上述过程。 当子视图滑入和滑出包含它的滚动视图的可视区域时,scrollTransition 会对该视图应用给定的过渡动画,并在不同阶段之间平滑地过渡。
在 WWDC 2023 中,苹果为 SwiftUI 添加了一个新的修饰器:geometryGroup()。它可以解决一些之前无法处理或处理起来比较困难的动画异常。...在 overlay 中,由于 show 的变化,将创建一个新的视图(if show)即黄色圆形。...这是因为在 SwiftUI 中,每个可动画视图根据 transaction 中的信息自行决定自身的动画行为。...geometryGroup() 确保子视图在统一的几何信息环境中,以实现预期的布局效果。它为子视图提供了一个连续的几何信息更新过程。 总结上述条件后,我们就很容易创建出其它会导致意外行为的代码。...这是 SwiftUI 开发团队在完成了基本的布局功能后,腾出精力,进一步改善细节的一个表现。同时,我们也希望苹果能够在官方文档中能够提供更加清晰示例,以提高开发者学习新 API 的效率。
但每当 SwiftUI 更新检查器视图时(这种更新可能出现在移动过程中,甚至是在输入文本字段的时候),渲染速率都会下降到每秒 10 到 15 帧,而且相当不稳定。这显然让人无法容忍。...但这会导致检查器中的值出现延迟,因此在地图编辑器的交互过程中(比如使用移动工具时)结果不准确,所以效果还是称不上完美。 但我觉得这可能只是个独立问题,并不能因此把 SwiftUI 一棒子打死。...越来越慢 在实现了第一个检查器之后,我开始研究另一个主题:Sprite 资产编辑器。利用这款工具,我可以用多个 sprite 拼接成复杂的资产,再最终为它们制作动画。...但上图展示的效果其实是在 AppKit 中完成的,因为我在 SwiftUI 一直实现不了预期的功能。大家应该注意到了,中间的 SpriteKit 视图上有三个按钮(分别是 +、200% 和 -)。...我刚开始以为是因为地图编辑器的 SpriteKit 主视图仍在后台渲染。所以我尝试在工作表显示出来后禁用渲染,但结果没有任何改变。 变更从一种环境传播至另一环境时,我也遇到了类似的延迟问题。
前言 WWDC 23 已经到来,SwiftUI 框架中有很多改变和新增的功能。在本文中将主要介绍 SwiftUI 中数据流、动画、ScrollView、搜索、新手势等功能的新变化。...有一个接受 Store 类型的视图。...在之前的 SwiftUI 框架版本中,应该使用 @ObservedObject 属性包装器来订阅更改。现在不需要了,因为 SwiftUI 视图会自动跟踪符合 Observable 协议的类型的更改。...动画 动画始终是 SwiftUI 框架中最重要的部分。在 SwiftUI 中轻松实现任何动画,但之前的框架版本缺少一些现在具有的功能。...还可以通过编程方式滚动到任何视图,但是,应该使用 scrollTargetLayout 视图修饰符来告诉 SwiftUI 框架在哪里查找标识以更新绑定。
是否有任何建议用来检测列表中的行选择,类似于 “NavigationLink”,但不导航到另一个视图(例如,显示 Sheet 或从列表中选择一个选项 )?...onAppear、init、viewDidLoadQ:在我的应用程序中,我在 UIHostingController 中托管了 SwiftUI 视图,这些视图都处于一个 UITabBarController...除了使用习惯外,还应考虑偏移后的视图是否需要会对周边的视图产生影响( 布局层面 )。详情请阅读 在 SwiftUI 中实现视图居中的若干种方法[14] 。...但是从一个文本字段到下一个文本字段的聚焦感觉不够流畅,而且每当我在一个文本字段中输入一个字母时,我的 CPU 使用率似乎会飙升到 70% — 100%。...在构造函数中初始化 @StateObjectQ:是否有办法在视图中用该视图结构参数初始化一个 @StateObject ?A:可以通过在 init 方法中手动初始化 @StateObject 来实现。
相较 State 有如下不同: •只能在手势的 updating 方法中修改,在视图其它的地方为只读•在手势结束时,与之关联(使用 updating 进行关联)的手势会自动将其内容恢复到它的初始值•通过...•simltaneously(同时识别)将一个手势与另一个手势相结合,创建一个同时识别两个手势的新手势。例如将缩放手势与旋转手势组合,实现同时对图片进行缩放和旋转。...例如,下面的代码在视图中创建了一个可同时支持缩放和旋转的手势: struct GestureDemo: View { @GestureState(resetTransaction: .init(...需自行编写 State 的数据恢复代码•由于使用了 State 替换 GestureState,逻辑判断就可以从 updating 移动到 onChanged 中 示例三:附带位置信息的点击 3.1 目标...在本例中,我们选择在 TapGesture 的 onEnded 中回调用户的闭包 总结 当前 SwiftUI 的手势,暂处于使用门槛低但能力上限不足的状况,仅使用 SwiftUI 的原生手段无法实现非常复杂的手势逻辑
领取专属 10元无门槛券
手把手带您无忧上云