首页
学习
活动
专区
圈层
工具
发布

避免 SwiftUI 视图的重复计算

随着近年来有关 SwiftUI 的文章与书籍越来越多,开发者应该都已经清楚地掌握了 —— “视图是状态的函数” 这一 SwiftUI 的基本概念。...SwiftUI 并不要求视图类型必须符合 Equatable 协议,因此采用了一种简单、粗暴但十分高效地基于 Block 的比对操作( 并非基于参数或属性 )。...让视图符合 Equatable 协议以自定义比对规则 也许由于某种原因,你无法采用上面的方法来优化构造参数,SwiftUI 还提供了另外一种通过调整比对规则的方式用以实现相同的结果。...让视图符合 Equatable 协议 为视图自定义判断相等的比对规则 在早期的 SwiftUI 版本中,我们需要使用 EquatableView 包装符合 Equatable 协议的视图以启用自定义比较规则...会在主线程上运行触发器闭包,如果闭包中的操作比较昂贵,可以考虑将闭包发送到后台队列 总结 本文介绍了一些在 SwiftUI 中如何避免造成视图重复计算的技巧,除了从中查找是否有能解决你当前问题的方法外

11K81

用NavigationViewKit增强SwiftUI的导航视图

用NavigationViewKit增强SwiftUI的导航视图 如果想获得更好的阅读体验,请访问我的博客 www.fatbobman.com[1] 最近一直在为我的iOS健康管理app健康笔记3.0[...由于SwiftUI原生提供的导航手段能力有限,因此在之前的版本中,NavigationView总是使用的不是那么的顺手。...•SwiftUI原生风格扩展功能的调用方法尽可能同原生SwiftUI方式类似 请访问Github下载NavigationViewKit[4] NavigationViewManager 简介 开发者对NavigationView...目前常用的解决方案有两种: •重新包装UINavigationController好的包装确实可以使用到UINavigationController提供的众多功能,不过非常容易同SwiftUI中的原生方法相冲突...视图中支持SwiftUI原生的所有定义,例如toolbar、navigationTitle等。 目前在启用转场动画时,title和toolbar会在转场动画后才显示,观感稍有不足。日后尝试解决。

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

    SwiftUI:视图的显示和隐藏动画

    SwiftUI最强大的功能之一是能够自定义视图的显示和隐藏方式。以前,您已经了解了如何使用常规if条件有条件地包含视图,这意味着当条件更改时,我们可以从视图层次结构中插入或移除视图。...转换控制插入和删除的方式,我们可以使用内置转换,以不同的方式组合它们,甚至创建完全自定义的转换。...首先,我们添加一些可以操作的状态: @State private var isShowingRed = false 接下来,我们使用该状态作为显示矩形的条件: if isShowingRed {...通过使用withAnimation()包装状态更改,我们可以获得SwiftUI的默认视图转换,如下所示: withAnimation { self.isShowingRed.toggle() }...一个有用的方法是不对称,它允许我们在显示视图时使用一个转换,在视图消失时使用另一个转换。

    6.3K30

    SwiftUI 视图的生命周期研究

    本文将作者对 SwiftUI 视图、SwiftUI 视图生命周期的理解和研究做以介绍,供大家一起探讨。...SwiftUI 的视图 在 SwiftUI 中,视图定义了一块用户界面,并以视图树的形式组织在一起,SwiftUI 通过解析视图树来创建合适的渲染。...SwiftUI 视图的生命周期 大多介绍 SwiftUI 视图生命周期的文章,通常会将视图的生命周期描述成如下的链条: 初始化视图实例——注册数据依赖——调用 body 计算结果——onAppear——...总之,SwiftUI 将根据它自身的需要,可能在任意的时间、创建任意数量的实例。开发者为了适应 SwiftUI 的这种特性,唯一可以做的就是让结构体的构造函数尽可能的简单。...为了避免造成 UI 卡顿,body 应设计成纯函数,只在其中创建简单的视图描述,将复杂的逻辑运算和副作用交给其他的线程来进行(比如在 Store 中将逻辑调度到其他线程或在视图中使用 task 将任务派遣到其他线程

    5.7K30

    为什么SwiftUI的视图使用结构体?

    SwiftUI并非如此:我们更喜欢将结构体用于整体视图,这有两个原因。 首先,有一个性能因素:结构体比类更简单,更快。...在SwiftUI中,我们所有的视图都是简单的结构体,几乎可以自由创建。想想看:如果您制作一个仅包含一个整数的结构体,则结构体的整个大小就是:一个整数。没有其他的。...得益于现代iPhone的强大功能,我不会慎重考虑后创建1000个整数甚至100,000个整数——眨眼之间就会发生。1000个SwiftUI视图甚至100,000个SwiftUI视图也是如此。...通过生成不会随时间变化的视图,SwiftUI鼓励我们转向更具功能性的设计方法:在将数据转换为UI时,我们的视图变成简单的,惰性的东西,而不是会失去控制的智能化的东西。...当您查看可以作为视图的事物时,可以看到这一点。我们已经使用了Color.red和LinearGradient作为视图——包含很少数据的简单类型。

    4.1K10

    为什么 SwiftUI 的视图使用结构体

    SwiftUI 并非如此:我们更喜欢将结构体用于整体视图,这有两个原因。 首先,有一个性能因素:结构体比类更简单,更快。...在 SwiftUI 中,我们所有的视图都是简单的结构体,几乎可以自由创建。想想看:如果您制作一个仅包含一个整数的结构体,则结构体的整个大小就是:一个整数。没有其他的。...1000 个 SwiftUI 视图甚至 100,000 个 SwiftUI 视图也是如此。他们是如此之快,以至于不再值得考虑。...通过生成不会随时间变化的视图,SwiftUI 鼓励我们转向更具功能性的设计方法:在将数据转换为 UI 时,我们的视图变成简单的,惰性的东西,而不是会失去控制的智能化的东西。...当您查看可以作为视图的事物时,可以看到这一点。我们已经使用了 Color.red 和 LinearGradient 作为视图——包含很少数据的简单类型。

    3.2K50

    SwiftUI 新容器视图 API 深度解析:轻松构建自定义布局

    今年,Apple 引入了新的 API,使我们能够以全新的方式构建自定义容器视图。本周,我们将学习 SwiftUI 新的分解 API 的优势。容器视图容器视图就是一个可以包含其他视图的视图。...,它是一个用于容纳任何 SwiftUI 视图的容器视图。...Demo根据文章内容,我将提供一个可以展示如何使用 SwiftUI 新的容器视图 API 构建自定义视图的简单示例,包含 Card、Carousel 和 Magazine 容器视图。...运行这个Demo此代码展示了如何在 SwiftUI 中构建自定义的容器视图,灵活地将不同的布局封装在容器中,以便在应用中多次复用这些布局模式。...总结通过使用 SwiftUI 新引入的 API 以及容器视图,你可以轻松构建具有良好复用性的自定义布局,提升应用的开发效率和代码可维护性。

    1.2K33

    在平淡中等待 WWDC 2025 | 肘子的 Swift 周报 #084

    Aether[8]基于该研究开发了 MenuWithAView[9],使 SwiftUI 开发者也能轻松为上下文菜单添加自定义辅助视图。...让 Picker 支持“未选择” (SwiftUI Picker With Optional Selection)[12] SwiftUI 中有不少实用却鲜为人知的 API 细节——至少在读这篇文章之前...在本文中,Keith Harrison[13]展示了一个简单而实用的技巧:如何让 Picker与可选类型的 Binding协同工作,并支持“不选任何值”这一场景,适用于诸如“无项目”或“重置选择”等常见需求...用自定义 Modifier 优雅管理焦点 (Simplifying Focus Management in SwiftUI with a Custom ViewModifier)[20] SwiftUI...RedLine[24] Redline 是由 Robb Böhnke[25]开发的 SwiftUI 视图 Modifier 合集,提供了丰富的可视化工具,用于标示视图的位置、尺寸、间距和对齐方式,帮助开发者快速验证布局实现或排查界面问题

    39900

    在 SwiftUI 视图中打开 URL 的若干方法

    访问我的博客 www.fatbobman.com[1] 可以获得更好的阅读体验 本文将介绍在 SwiftUI 视图中打开 URL 的若干种方式,其他的内容还包括如何自动识别文本中的内容并为其转换为可点击链接...,以及如何自定义打开 URL 前后的行为等。...image-20220520182722773 SwiftUI 1.0( iOS 13、Catalina ) 在视图中,开发者通常需要处理两种不同的打开 URL 的情况: 点击一个按钮( 或类似的部件...openURL 的行为 在 Button 中,我们可以通过在闭包中添加逻辑代码,自定义开启 URL 之前与之后的行为。...SwiftUI 视图中打开 URL 的几种方法,不过读者应该也能从中感受到 SwiftUI 三年来的不断进步,相信不久后的 WWDC 2022 会为开发者带来更多的惊喜。

    9.2K31

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

    作为 SwiftUI 最引人注目的功能之一,预览功能吸引了不少开发者初次接触 SwiftUI。然而,随着项目规模的增长,越来越多的开发者发现预览功能并不如最初想象的那么易用。...欢迎大家在 Discord 频道[2] 中进行更多地交流 让预览崩溃的一段视图代码 不久前,Toomas Vahter 写了一篇博客 Bizarre error in SwiftUI preview[3...image-20230522105916884 在项目对应的 Derived Data 目录中,查找尾缀为 .preview-thunk.swift 的文件: image-20230522110506987...接下来,让我们继续查看 Xcode 是如何加载预览视图的。。 在项目的 Derived Data 目录中查找尾缀为 .preview-thunk.dylib 的文件。...但是,这也可能导致无法正常编译的情况发生(例如本文中的例子) 预览是以预览衍生文件作为入口的,开发者必须在预览代码中为预览视图提供足够的上下文信息( 例如注入所需的环境对象 ) 总的来说,Xcode 预览功能虽然在视图开发流程中极为方便

    2.2K10

    在 SwiftUI 中实现视图居中的若干种方法

    欢迎大家在 Discord 频道[2] 中进行更多地交流将某个视图在父视图中居中显示是一个常见的需求,即使对于 SwiftUI 的初学者来说这也并非难事。...请阅读 SwiftUI 布局 —— 对齐[5] ,了解更多有关 ZStack、overlay、background 的对齐机制Geometry虽然有些大材小用,但当我们需要获取更多有关视图的信息时,GeometryReader...万变不离其宗,掌握了 SwiftUI 的布局原理,无论需求如何变化都可轻松应对。...我为本文这种通过多种方法来解决一个问题的方式添加了【小题大作】标签,目前使用该便签的文章还有:在 Core Data 中查询和使用 count 的若干方法[6]、在 SwiftUI 视图中打开 URL.../[7] 在 SwiftUI 视图中打开 URL 的若干方法: https://www.fatbobman.com/posts/open_url_in_swiftUI/[8] Twitter: https

    10.1K40

    在 SwiftUI 中 accessibilityChildren 视图修饰符的作用

    前言SwiftUI 为我们提供了一系列丰富的视图修饰符,用于操作视图的可访问性树。我已经介绍了其中许多,你可以在博客中找到它们。...accessibilityChildren 视图修饰符允许我们为视图创建一个可访问性容器,并使用 ViewBuilder 闭包提供的视图元素进行填充。示例让我们来看一个简单的示例。...SwiftUI 不会渲染我们通过 ViewBuilder 闭包传递的视图,它仅用于填充可访问性树的子元素。...此代码将以红色柱状图的形式显示数据点,每个数据点的值决定柱状的高度,同时也包括辅助功能信息以提供无障碍体验。请注意,柱状图的颜色可以通过 .fill(Color.red) 进行自定义。...运行截图:总结今天,我们了解了 SwiftUI 为我们提供的又一个强大的可访问性视图修饰符。

    2.4K20

    SwiftU:在循环中创建视图

    通常在一个循环中创建多个SwiftUI视图。例如,我们可能想要遍历一系列名称,并让每个名称成为文本视图,或者遍历一系列菜单项,并将每个名称显示为图像。...SwiftUI为此提供了一个专用的视图类型,称为ForEach。这可以在数组和范围上循环,根据需要创建尽可能多的视图。更妙的是,ForEach不会像我们手动输入视图一样被10个视图限制所影响。...的Picker视图时特别有用,它允许我们显示各种选项供用户选择。...3、创建一个Picker视图,要求用户选择他们最喜欢的,并将选择的值和@State属性双向绑定。 4、使用ForEach循环遍历所有可能的学生姓名,将其转换为文本视图。...3、Picker有一个标签,“Select your student”(选择你的学生),它告诉用户它做了什么,还提供了一些描述性的东西供屏幕阅读器朗读。

    3.2K20

    完成 Liquid Glass 的适配了吗?| 肘子的 Swift 周报 #0102

    SwiftUI 日期范围选择器 (Date Range picker in SwiftUI)[8] 在许多应用中,用户需要选择时间范围(周、月、年或自定义区间),而系统的 DatePicker 往往无法满足需求...深入理解 SwiftUI 的 TimelineView[10] TimelineView 是一个没有自身外观的容器视图,会在预定时间点重新绘制其内容,因而非常适合构建 实时时钟、计时器、动画可视化、实时数据或逐帧动画...[18] 在 SwiftUI 中,优化应用性能的关键之一是减少不必要的视图重绘。...然而,由于这涉及状态管理、依赖关系、视图比较等诸多机制,即便 SwiftUI 已经发布多年,依然有许多开发者理解不足。...Range picker in SwiftUI): https://l.fatbobman.com/w0102-03 [9] Kyryl Horbushko: https://www.linkedin.com

    20610

    自定义XCode的SwiftUI View模版(.xctemplate制作)

    关于自定义XCode内UIKit相关的文件模板,网上已有很多的教程,这里来介绍下对于SwiftUI View的自定义模板创建。...一、分析创建模板 1.下图为我们创建模板的展示,iOS下Source还是User Interface,User Interface下SwiftUI View还是我自定义的PSCustomScreen...二、实现自定义SwiftUI View模板 根据图一,我们知道SwiftUI View模板属于iOS下的User Interface,所以我们自定义的SwiftUI View模板也放到iOS下的User...相关,具体如下 image.png 这个例子是定义了Properties书写的位置、子视图书写的位置、一般类型的方法书写的位置、事件流转方法书写的位置和最后的Previews。...就会出现我们自定义的模板(没有可以重启XCode再试试) image.png i.选择自定义模板创建文件,最终生成的.swift文件如下 image.png 三、分析下我们做了什么 //___FILEHEADER

    68320

    如何在Xcode下预览含有Core Data元素的SwiftUI视图

    如何在Xcode下预览含有Core Data元素的SwiftUI视图 从SwiftUI诞生之日起,预览(Canvas Preview )一直是个让开发者又爱又恨的功能。...预览模拟器没有提供管理入口,我们通常需要使用更加简单粗暴的方式来实现上面的修复作业。...SwiftUI预设了大量同系统有关的环境值,通过设置或响应这些数据,我们可以修改系统配置或读取系统信息。 SwiftUI视图采用树状结构组织,在任意节点视图上注入的环境数据都将影响该节点的所有子视图。...因此,通常不推荐在视图中直接获取或操作Core Data数据(非常简单的应用除外)。...尽管SwiftUI的Redux模式有诸多优点,但由于只存在视图这一种表现形式,因此在视图描述中经常会参杂不少的数据计算、整理的工作。

    6.7K10

    用 SwiftUI 的方式进行布局

    下文中,我们将用 SwiftUI 布局系统提供的多种手段来实现该要求。在这些解决方案中,有些非常简单、直接,有些则会略显烦琐,曲折。我尽量让每种方案都采用不同的布局逻辑。...SwiftUI 在进行布局时,当布局容器给出的建议尺寸无法满足全部子视图的需求尺寸时,会根据子视图的 Priority,优先满足级别较高的视图的布局需求。...转场是 SwiftUI 提供的强大能力之一,可以极大地简化动画实现的难度。我写的视图管理器 SwiftUI Overlay Container[7] ,便是建立在对转场功能的充分应用之上。...有关转场动画的更多内容,请参阅 SwiftUI 的动画机制[8] 一文 八、Layout 协议 在 4.0 版本中,SwiftUI 增加了 Layout 协议,通过该协议,开发者可以针对特定的场景,创建自定义布局容器...毋庸置疑,这是所有方案中最复杂的实现。不过,如果我们有类似的需求,使用该自定义容器将十分地便利。

    4.3K00

    SwiftUI Overlay Container 2 —— 可定制、高效、便捷的视图管理器

    SwiftUI Overlay Container[1] 是一个用于 SwiftUI 的视图容器组件。一个可定制、高效、便捷的视图管理器。...仅需简单配置,SwiftUI Overlay Container 即可帮你完成从视图组织、队列处理、转场、动画、交互到显示样式配置等基础工作,让开发者可以将精力更多地投入到应用程序视图的实现本身。...shadowStyle 为视图添加阴影 dismissGesture 为视图添加取消手势,目前支持 单击、双击、长按、左划、右划、上划、下划、自定义。...自定义手势需使用 eraseToAnyGestureForDismiss 对类型进行擦除。...使用者通过调用容器管理器的特定方法,让指定的容器执行显示视图、撤销视图等工作。 容器管理器的环境值 在 SwiftUI 中,视图代码通过环境值调用容器管理器。

    2.8K20
    领券