每个视图都有与其对应的状态，当状态变化时，SwiftUI 都将重新计算与其对应视图的 body 值。...如果视图响应了不该响应的状态，或者视图的状态中包含了不该包含的成员，都可能造成 SwiftUI 对该视图进行不必要的更新（ 重复计算 ），当类似情况集中出现，将直接影响应用的交互响应，并产生卡顿的状况。...通常我们会将这种多余的计算行为称之为过度计算或重复计算。本文将介绍如何减少（ 甚至避免 ）类似的情况发生，从而改善 SwiftUI 应用的整体表现。...并且 SwiftUI 会在其变化时自动更新（ 重新计算 ）对应的视图。 SwiftUI 上有一个困扰了不少人的问题：为什么无法在视图的构造函数中，更改 State 包装的变量值？...会在主线程上运行触发器闭包，如果闭包中的操作比较昂贵，可以考虑将闭包发送到后台队列 总结 本文介绍了一些在 SwiftUI 中如何避免造成视图重复计算的技巧，除了从中查找是否有能解决你当前问题的方法外
用NavigationViewKit增强SwiftUI的导航视图 如果想获得更好的阅读体验，请访问我的博客 www.fatbobman.com[1] 最近一直在为我的iOS健康管理app健康笔记3.0[...由于SwiftUI原生提供的导航手段能力有限，因此在之前的版本中，NavigationView总是使用的不是那么的顺手。...•SwiftUI原生风格扩展功能的调用方法尽可能同原生SwiftUI方式类似 请访问Github下载NavigationViewKit[4] NavigationViewManager 简介 开发者对NavigationView...视图中支持SwiftUI原生的所有定义，例如toolbar、navigationTitle等。 目前在启用转场动画时，title和toolbar会在转场动画后才显示，观感稍有不足。日后尝试解决。...FixDoubleColumnNavigationViewStyle(widthForLandscape: 350, widthForPortrait:250)) 并且可以为横屏竖屏两种状态分别设置左侧栏宽度
在 app 运行后进行第一次渲染时，SwiftUI 将依据类型树按图索骥，创建类型实例，实例的 body 根据初始状态计算视图值，并组织成视图值树。...当 State 发生变化后，SwiftUI 会生成一棵新的视图值树（Source of truth 没有发生变化的节点，不会重新计算，直接使用旧值），并同老的视图值树进行比对，SwiftUI 将对其中有变化的部分重新布局渲染...SwiftUI 视图的生命周期 大多介绍 SwiftUI 视图生命周期的文章，通常会将视图的生命周期描述成如下的链条： 初始化视图实例——注册数据依赖——调用 body 计算结果——onAppear——...开发者即使不了解文本上述的内容，也可以让 SwiftUI 的代码在日常中发挥出不错的效率。但如果能够对视图的生命周期有更深入的了解，将可以帮助开发者在一些特定的场合提高代码的执行效率。...在前文的视图值树介绍中我们提到，当 SwiftUI 重建该树时，如果树上某个节点（视图）的 Source of truth 没有发生变化，将不重新计算，直接使用旧值。
SwiftUI最强大的功能之一是能够自定义视图的显示和隐藏方式。以前，您已经了解了如何使用常规if条件有条件地包含视图，这意味着当条件更改时，我们可以从视图层次结构中插入或移除视图。...转换控制插入和删除的方式，我们可以使用内置转换，以不同的方式组合它们，甚至创建完全自定义的转换。...首先，我们添加一些可以操作的状态： @State private var isShowingRed = false 接下来，我们使用该状态作为显示矩形的条件： if isShowingRed {...通过使用withAnimation（）包装状态更改，我们可以获得SwiftUI的默认视图转换，如下所示： withAnimation { self.isShowingRed.toggle() }...一个有用的方法是不对称，它允许我们在显示视图时使用一个转换，在视图消失时使用另一个转换。
SwiftUI并非如此：我们更喜欢将结构体用于整体视图，这有两个原因。 首先，有一个性能因素：结构体比类更简单，更快。...在SwiftUI中，我们所有的视图都是简单的结构体，几乎可以自由创建。想想看：如果您制作一个仅包含一个整数的结构体，则结构体的整个大小就是：一个整数。没有其他的。...得益于现代iPhone的强大功能，我不会慎重考虑后创建1000个整数甚至100,000个整数——眨眼之间就会发生。1000个SwiftUI视图甚至100,000个SwiftUI视图也是如此。...您会发现，类能够自由更改其值，这可能导致代码混乱——SwiftUI如何知道什么更改了值并需要更新UI？...通过生成不会随时间变化的视图，SwiftUI鼓励我们转向更具功能性的设计方法：在将数据转换为UI时，我们的视图变成简单的，惰性的东西，而不是会失去控制的智能化的东西。
SwiftUI 并非如此：我们更喜欢将结构体用于整体视图，这有两个原因。 首先，有一个性能因素：结构体比类更简单，更快。...在 SwiftUI 中，我们所有的视图都是简单的结构体，几乎可以自由创建。想想看：如果您制作一个仅包含一个整数的结构体，则结构体的整个大小就是：一个整数。没有其他的。...1000 个 SwiftUI 视图甚至 100,000 个 SwiftUI 视图也是如此。他们是如此之快，以至于不再值得考虑。...您会发现，类能够自由更改其值，这可能导致代码混乱—— SwiftUI 如何知道什么更改了值并需要更新 UI？...通过生成不会随时间变化的视图，SwiftUI 鼓励我们转向更具功能性的设计方法：在将数据转换为 UI 时，我们的视图变成简单的，惰性的东西，而不是会失去控制的智能化的东西。
如何在Xcode下预览含有Core Data元素的SwiftUI视图 从SwiftUI诞生之日起，预览（Canvas Preview ）一直是个让开发者又爱又恨的功能。...结合两年来我在SwiftUI中使用Core Data的经验和教训，我们将在本文中探讨： •导致SwiftUI预览崩溃的部分原因•如何在之后的开发中避免类似的崩溃出现•如何在Xcode中安全可靠地预览含有...SwiftUI预设了大量同系统有关的环境值，通过设置或响应这些数据，我们可以修改系统配置或读取系统信息。 SwiftUI视图采用树状结构组织，在任意节点视图上注入的环境数据都将影响该节点的所有子视图。...尽管SwiftUI的Redux模式有诸多优点，但由于只存在视图这一种表现形式，因此在视图描述中经常会参杂不少的数据计算、整理的工作。...预置复杂数据的Bundle数据库 对于拥有复杂数据模型的应用该如何创建用于预览的演示数据呢？
有三个可能的情况，我们将专注讨论于横轴（宽度），但纵轴（高度）同理： 情况一：如果子视图需求小于提供的视图 在这个例子中考虑文本视图，提供了比需要绘制文字更多的空间 struct ContentView...因此，文本提供 HStack 宽度的三分之一 ((400 – 40) / 3 = 120)。...例如，我们看见文本获取需求空间后如何处置多余的不需要的空间，然而，如果需求的空间大于提供，就可能会发生一些事情，具体取决于你如何配置你的视图。...例如，可能会根据提供的尺寸截取文本，或者在提供的宽度内垂直的展示文本，如果你使用 fixedSize 修改甚至可能超出屏幕就像例子中的图片一样。...一旦我们计算好所有理想尺寸，我们可以通过添加子视图宽度和视图间距来计算容器尺寸。从高度上来说，我们的视图将会和最高子视图一样高。
在使用 UIKit 时，我总是将这种类型的视图实现为具有特定 UICollectionViewFlowLayout 的 UICollectionView。但在 SwiftUI 中该如何实现呢？...首先，我需要一个函数来计算并返回输入数据的所有宽度。我通过将所有输入值映射到元组中，其中包含输入值和自身的宽度来完成。...在映射中，我使用 reduce 函数来总结与给定输入值相关联的所有宽度（文本宽度、边框宽度、文本填充和间距）。...，我们必须计算 VStack 的高度，以使 SwiftUI 更容易解释我们的视图组件。...然后，详细介绍了实现该选择器的逻辑，包括如何处理选项的布局、宽度和高度，以及如何处理用户与按钮的交互。 最后，提供了一个简单的视图实现，可以在 SwiftUI 中使用该选择器。
假设我们想创建一个类似于 iMessage 的视图，在那里你可以看到一个信息列表（与本例无关），在视图的底部有一个文本框。当用户点击文本字段时，键盘会在其工具栏中出现一个文本字段。...在使用 environmentObject 的情况下，如何避免创建实例的视图被重新计算Q：如何在避免重新计算顶层视图 body 的情况下，在不同子树的两个子视图之间共享状态（ 例如 ObservableObject...在常规宽度下，我们在详细视图中有一个带有导航堆栈的侧边栏。在紧凑宽度下，我们有一个标签栏，每个标签都有一个导航堆栈。...image-20221022135326560San Francisco 宽度风格Q：如何在 SwiftUI 中如何使用 SF 字体家族新增的三种宽度风格（ Compressed、Condensed、Expanded...这就涉及到了所有符合 DynamicProperty 协议的属性包装器的一个特点：在视图的生存期内仅有第一次初始化的实例会与视图创建关联。详细请阅读 避免 SwiftUI 视图的重复计算[22] 。
但由于 SwiftUI 的视图并没有提供尺寸这一属性，因此即使在 SwiftUI 诞生了数年后的今天，如何获取视图的尺寸仍然是网络上的热门问题。...SwiftUI 布局过程速览 SwiftUI 的布局就是布局系统通过为视图树上的节点提供必要的信息，最终计算出每个视图（ 矩形 ）所需的尺寸以及摆放位置的行为。...第二阶段 —— 安置子民 在该阶段，父视图将根据 SwiftUI 布局系统提供的屏幕区域（ 由第一阶段计算得出 ）为子视图设置渲染的位置和尺寸（ 上方的 5-6 ）。...（ 文本不折行、不省略 ） 85.33 x 20.33（ 上文例子中尺寸 ） 明确尺寸模式 如果建议宽度大于单行显示的需要，则需求宽度返回单行实现显示尺寸的宽度 85.33 ；如果建议宽度小于单行显示的需要则需求宽度返回建议尺寸的宽度...视图尺寸 视图渲染后在屏幕上呈现的尺寸，也是热门提问 —— 如何获取视图的尺寸中所指的尺寸。 在视图中可以通过 GeometryReader 获取特定视图的尺寸及位置。
文本内容超出了矩形的宽度Spacer 是有最小厚度设定的，默认的最小垫片厚度为 8px 。...即使文本宽度超出了 HStack 给出的建议宽度，但 HStack 在布局时，仍会保留其最小厚度，导致下图上方的文本无法充分利用矩形视图的宽度。解决方法为：Spacer(minLength: 0)。...的尺寸为 Color 和 Text 两者的最大宽度 x 最大高度，该尺寸是一个可变尺寸（ 取决于 Text 文本的长度 ）当 ZStack 给出的建议宽度大于 300 时，Text 的可利用宽度将超过...Color 的宽度因此会出现两种可能的错误状态：当文本较长时，Text 会超过 Color 的宽度由于合成视图具备可变尺寸特性，VStack、HStack 在为其添加 spacing 时将可能出现异常...万变不离其宗，掌握了 SwiftUI 的布局原理，无论需求如何变化都可轻松应对。
访问我的博客 www.fatbobman.com[1] 可以获得更好的阅读体验 本文将介绍在 SwiftUI 视图中打开 URL 的若干种方式，其他的内容还包括如何自动识别文本中的内容并为其转换为可点击链接...，以及如何自定义打开 URL 前后的行为等。...image-20220520182722773 SwiftUI 1.0（ iOS 13、Catalina ） 在视图中，开发者通常需要处理两种不同的打开 URL 的情况： 点击一个按钮（ 或类似的部件...）打开指定的 URL 将文本中的部分内容变成可点击区域，点击后打开指定的 URL 遗憾的是，1.0 时代的 SwiftUI 还相当稚嫩，没有提供任何原生的方法来应对上述两种场景。...SwiftUI 视图中打开 URL 的几种方法，不过读者应该也能从中感受到 SwiftUI 三年来的不断进步，相信不久后的 WWDC 2022 会为开发者带来更多的惊喜。
我将通过两篇文章来分享我对预览功能的认知和理解，并探讨如何构建稳定的预览。本文将首先剖析预览功能的实现机制，让开发者了解哪些情况是预览必然无法处理的。...欢迎大家在 Discord 频道[2] 中进行更多地交流 让预览崩溃的一段视图代码 不久前，Toomas Vahter 写了一篇博客 Bizarre error in SwiftUI preview[3...可惜的是，Toomas Vahter在文章中没有告诉读者崩溃原因。我借用这段代码来与大家一起探究预览功能是如何工作的。...接下来，让我们继续查看 Xcode 是如何加载预览视图的。。 在项目的 Derived Data 目录中查找尾缀为 .preview-thunk.dylib 的文件。...在下一篇文章中，我们将从开发者的角度审视预览功能：它的设计目的、最适宜的使用场景以及如何构建稳定高效的预览。
为了计算UILabel的宽度，除了通过NSString自带的boundingRectWithSize的API外，还可以利用sizeToFit对UILabel封装一个分类。 1....需求： 根据字符串，字体，计算UILabel宽度 根据字符串，字体，宽度，计算UILabel高度 2....context:(nullable NSStringDrawingContext *)context NS_AVAILABLE(10_11, 7_0); 参数解释 size： 宽高限制，用于计算文本绘制时占据的矩形块...options： 文本绘制时的附加选项。可能取值请参考“NSStringDrawingOptions”。 attributes： 文本绘制时用到的AttributedString的属性。...包括一些信息，例如如何调整字间距以及缩放。最终，该对象包含的信息将用于文本绘制。该参数一般为 nil 。 返回值： 一个矩形，大小等于文本绘制完将占据的宽和高。
视图的性能优化Q：面对复杂的用户界面时，控制视图中的更新范围的最佳做法是什么（ 以避免不需要的转发以及重复计算 ）。...，只提取你需要的属性，并依靠 SwiftUI 的 equality 检查来提前中止无效计算苹果工程师给出的答案与 避免 SwiftUI 视图的重复计算[5] 一文中的很多建议都一致。...Jane 的 自动根据宽度排版[10] 视频与该问题十分契合。阅读 The SwiftUI Layout Protocol [11]了解如何创建自定义布局。...TextField 内容验证Q：如何实现一个只接受数字的 SwiftUI TextField，小数是允许的。A：向文本字段提供 FormatStyle 以实现自动将文本转换为各种数字。...5] 避免 SwiftUI 视图的重复计算: https://www.fatbobman.com/posts/avoid_repeated_calculations_of_SwiftUI_views/[
在 iOS 16 中，SwiftUI 增加了一个新的自适应布局容器 ViewThatFits。正如其名称所示，它的作用是在给定的多个视图中找出最合适的视图并使用。...ViewThatFits 的判断和呈现逻辑 既然 ViewThatFits 是从给定的视图中挑选出最合适的那个，那么它的判断依据是什么呢？判断的顺序如何？最终又如何呈现呢？...Rectangle().fill(.yellow) } .fixedSize() 对于这种视图，其“理想呈现”是一个复合的状态： 宽度：VStack 将逐个询问子视图的理想尺寸，使用其中宽度的最大值作为它的需求尺寸...用易懂的描述就是，在有明确宽度限定的情况下，要求 Text 显示全部的文本内容。...选择合适长度的文本 这也是 ViewThatFits 最常被使用的场景，从提供的一组文本中，找出最适合当前空间的那个。
前言 条形图以矩形条的形式呈现数据的类别，其宽度和高度与它们表示的值成比例。本文将展示如何创建一个垂直条形图，其中矩形的高度将代表每个类别的值。...系列文章 如何在 SwiftUI 中创建条形图 SwiftUI 中的水平条形图 在 iOS 16 中用 SwiftUI Charts 创建一个折线图 在 iOS16 中用 SwiftUI 图表定制一个线图...很容易将部分内容提取到子视图中，以便每个部分都很小且易于维护。从将包含 BarChartView 以及可能的其他文本或数据的视图开始。...文本视图的宽度被限制在条形图宽度的范围内，而且条形图的标签文本会被截断，条形图的文本视图也被限制在条形宽度的范围内，并且文本可以被隐藏起来。...SwiftUI 是一个很好的平台，用于创建视图和快速重构独立的子视图。在 SwiftUI 中构建条形图需要做一些工作，随着使用数据来试用条形图，可以确定更多的定制化。
需求：计算快递单号的非重复计数 ? (一) 需求分析 如果要计算非重复计数，我们很容易可以想到一个函数DistinctCount，那如果直接使用是不是就可以了呢？...这里会有几个问题： 空值未进行处理 总计这里多计了1，而且在未有单号的情况下也作为了1显示。 那我们来了解下原因，空值的话如何处理以及为什么总计这里会多了1。...因为DistinctCount在计算非重复计数的时候会把空值也作为一个值来进行计算，所以导致数据上的差异。...但是和我们要求的数据透视表有些许差异，结果是要求把订单号全部显示出来，而直接拖入字段后把没有快递单号的订单号给隐藏了。这里留个小悬念，可以自己动手实现下这个功能。...如果觉得有帮助，那麻烦您进行转发，让更多的人能够提高自身的工作效率。
我们将使用SwiftUI框架来构建Landmark详情界面。 Landmarks利用stacks将图片和文本组合起来来进行视图布局。你需要引用MapKit框架头文件来创建一个地图视图。...你可以通过Xcode新的实时反馈功能，来优化你的视图布局 。 第一节 创建一个使用SwiftUI的新Xcode项目。浏览画布、预览和SwiftUI模板代码。...修改文本框字体是利用的系统的字体。 ? 第四步 手动修改代码，即添加.color(.green)把文本修改成绿色。 要自定义SwiftUI视图，你可以调用modifiers方法。...第六步 注意一点的就是，Xcode会根据inspector修改自动更新你的代码。 利用Stacks组合视图 我们创建了一个文本框用来显示landmark的详情信息，并且把这个文本控件放到头部。...设置MapView的frame。 如果你只设置了Mapview的高度，那么MapView会自动设置其宽度来适应父视图。所以MapView会充满宽度区域。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
云直播
实时音视频
