在 SwiftUI 5.0 中，苹果大幅强化了 ScrollView 功能。新增了大量新颖、完善的 API。本文将对这些新功能进行介绍，希望能够让它们更多、更早的帮助到有需要的开发者。...可采用 优化在 SwiftUI List 中显示大数据集的响应效率[5] 一文中介绍的方式来解决。 scrollPostion(id:) 使用此修饰符可以让滚动视图滚动到特定的位置。...（视图标识） 不支持锚点设定，固定锚点为子视图的 center 正如 优化在 SwiftUI List 中显示大数据集的响应效率[6] 一文所提到的，当数据集很大时，也会出现性能问题。...总结 我完全没有想到，在 SwiftUI 5 中，苹果对 ScrollView 进行了全面增强。值得赞赏的是，他们不仅提供了一些一直期待的功能，而且在 API 的设计和实现完成度上都非常出色。...就我个人而言，在 SwiftUI 5 中，ScrollView 的原生方案已经能够满足大多数需求，因此我们将看到更多人采用 ScrollView + LazyStack 的组合方式。
本文将介绍几种在 SwiftUI 中获取当前滚动状态的方法，每种方法都有各自的优势和局限性。...isScrolling_2022-09-12_10.26.06.2022-09-12 10_28_09方法一：Introspect可在 此处[4] 获取本节的代码在 UIKit（ AppKit ）中，开发者可以通过...目前 SwiftUI 在内部的实现上去 UIKit（ AppKit ）化很明显，比如，本节介绍的方法在 SwiftUI 4.0 中已经失效方法二：Runloop我第一次接触 Runloop 是在学习 Combine...模式，因此无法有效地区分滚动是由那个控件造成的方法三：PreferenceKey在 SwiftUI 中，子视图可以通过 preference 视图修饰器向其祖先视图传递信息（ PreferenceKey...判断的准确度没有前两种方式高当可滚动组件中的内容出现了非滚动引起的尺寸或位置的变化（ 例如 List 中某个视图的尺寸发生了动态变化 ），本方式会误判断为发生了滚动，但在视图的变化结束后，状态会马上恢复到滚动结束滚动开始后
简介 今年 SwiftUI 新增最好的功能之一必须是布局协议。它不但让我们参与到布局过程中，而且也给了我们一个很好的机会去更好的理解布局在 SwiftUI 中的作用。...这是可以的，尽管我仍然推荐你浏览第一部分，至少浅读一下。这将确保我们在开始探索第二部分中描述的更多高级特性时，我们在同一进度。...请注意至少到现在，布局协议不能创建懒加载容器，比如 LazyHStack 或 LazyVStack。懒加载容器是指那些只在滚入屏幕时渲染，滚出到屏幕外就停止渲染的视图。...但是不用担心，目前为止你可以认为它们就是视图并且像视图一样使用它们。这个框架使用了漂亮的 Swift 语言技巧使你的布局代码在向 SwiftUI 中插入时产生一个透明视图 。...这些信息都可以大大的简化任务。即使你不能有这种奢望来做这种假设，它也可能是开始编码的好地方，让你的布局在一些情况下工作，然后开始为更复杂的情况添加代码。
在 SwiftUI 中，有很多手段可以达成此目的。本文将介绍其中的一些方法，并对每种方法背后的实现原理、适用场景以及注意事项做以说明。...当然，你也可以利用 Spacer 这个特性，控制 Text 在 HStack 中可使用的宽度。...HStack、VStack 在进行布局时，会为每个子视图提供四种不同的建议模式（ 最小、最大、明确尺寸以及未指定 ），如果子视图在不同的模式下返回的需求尺寸是不一样的，则意味着该视图是可变尺寸视图。...因此在第一个例子中，即使没有为 HStack 设置 spacing ，Text 仍然会使用全部的 HStack 宽度。...().fill(.clear)在使用 SwiftUI 进行开发的过程中，Color、Rectangle 等经常被用来实现对容器的等分操作。
本文是 SwiftUI 开发教程中的一篇，我们将一起探究上述问题的答案。若你有兴趣学习 iOS 应用程序开发，又或者是想了解 iOS 程序是如何运行的，欢迎关注这一系列文章。...SwiftUI 集众家之长，具有诸多优秀特性，可以预见它将会出现在诸多应用程序中。若你有兴趣，我会在其它文章中详解 SwiftUI，本文只着重讲其中弹窗的写法与逻辑。 你会怎样描述一个程序？...SwiftUI 由两类代码组成，分别是 View 和 Modifier。如下图所示，这两类代码都可以在 Xcode 中直接拖出来用，你要做的只是玩拼图把它们拼在一起拼出你想要的功能。...纵向排列的 View 在 SwiftUI 里叫做 VStack，它用一个花括号 {包住里面的内容}；而文字的 View 在 SwiftUI 里叫做 Text。...若你因为文中的长代码而感到害怕，觉得程序员都是天才，脑子超好用能将这些代码一次性全写出来，不是这样的。比如上面代码中的例子，一开始你只有一个简单的思路，我要一句名言，能点按复制就行。
我之所以说性能因素，是因为很多人认为这是SwiftUI使用结构体的主要原因，而实际上这只是更大范围的一部分。...在UIKit中，每个视图都来自一个名为UIView的类，该类具有许多属性和方法：背景色，确定其放置方式的约束，用于将其内容呈现到其中的图层等等。...struct or class 通常这不是问题，但是有一个名为UIStackView的特定子类，它类似于SwiftUI中的VStack和HStack。...在SwiftUI中，我们所有的视图都是简单的结构体，几乎可以自由创建。想想看：如果您制作一个仅包含一个整数的结构体，则结构体的整个大小就是：一个整数。没有其他的。...通过生成不会随时间变化的视图，SwiftUI鼓励我们转向更具功能性的设计方法：在将数据转换为UI时，我们的视图变成简单的，惰性的东西，而不是会失去控制的智能化的东西。
欢迎大家在 Discord 频道[2] 中进行更多地交流 “对齐”是 SwiftUI 中极为重要的概念，然而相当多的开发者并不能很好地驾驭这个布局利器。...，还可以标识线 在 SwiftUI 中，分别用 HorizontalAlignment 和 VerticalAlignment 来标识在视图纵轴和横轴方向的参考线，并且可以由两者共同构成对视图中的某个具体的参考点的标识...alignmentGuide 修饰器 在 SwiftUI 中，开发者可以使用 alignmentGuide 修饰器来修改视图某个对齐指南的值（ 为对齐指南设定显式值，有关显式值见下文）。...文字基线不同于 bottom Text("山不在高，有仙则名。水不在深，有龙则灵。斯是陋室，惟吾德馨。苔痕上阶绿，草色入帘青。谈笑有鸿儒，往来无白丁。可以调素琴，阅金经。无丝竹之乱耳，无案牍之劳形。...overlay、background 在 SwiftUI 中，除了我们熟悉的 VStack、HStack、ZStack 、Grid 、List 外，很多 modifier 的功能也都是通过布局来实现的。
前言 最近，在我正在开发一个在 Dribbble 上找到的设计的 SwiftUI 实现时，我想到了一个点子，可以通过一些酷炫的筛选器扩展该项目以缩小结果列表。...（不能适应上一行的元素），并通过减去当前项的宽度来更新 HStack 的行宽。...这就是为什么我将分隔行的结果映射到元组中，其中包含每行和 UUID 值。 由于如此，我可以向 ForEach 循环提供 id 参数。...这就是为什么我首先将整个 ForEach 循环包装在 HStack 中，然后再包装在 Group 中，以确保编译器可以正确解释一切。...最后，提供了一个简单的视图实现，可以在 SwiftUI 中使用该选择器。这个选择器可用于创建各种交互式选择界面。 - EOF -
我之所以说性能因素，是因为很多人认为这是 SwiftUI 使用结构体的主要原因，而实际上这只是更大范围的一部分。...struct or class 通常这不是问题，但是有一个名为 UIStackView 的特定子类，它类似于 SwiftUI 中的 VStack 和 HStack。...在 UIKit 中，UIStackView 是一种非渲染视图类型，旨在简化布局，但这意味着即使它因为继承的原因具有背景色，也从未真正使用过。...在 SwiftUI 中，我们所有的视图都是简单的结构体，几乎可以自由创建。想想看：如果您制作一个仅包含一个整数的结构体，则结构体的整个大小就是：一个整数。没有其他的。...通过生成不会随时间变化的视图，SwiftUI 鼓励我们转向更具功能性的设计方法：在将数据转换为 UI 时，我们的视图变成简单的，惰性的东西，而不是会失去控制的智能化的东西。
介绍 早在 2020 年，我们就拥有了在 SwiftUI（LazyVGrid 和 LazyHGrid）中绘制网格的新视图控件。两年后，我们又获得了另一种在网格（Grid）中显示视图的视图控件。...尽管这里的大多数示例都可以，但每一行可以包含任意数量的单元格。 探索网格选项 在以下部分中，我们将探讨不同的网格大小、对齐和跨越选项。...请注意，虽然我在设计应用程序时主要考虑了 macOS，但该应用程序在 iPad 上也能流畅运行。无需更改。 当您阅读以下部分时，最好运行 Grid Trainer 应用程序并测试您对网格的理解。...在下面的示例中，橙色列的宽度由第二行中最宽的单元格决定。身高也是如此。在示例中，第二行与行中最高的紫色单元格一样高。 未定义大小的单元 默认情况下，网格将为单元格提供尽可能多的空间。...如果您查看第一行中的第二个单元格，它应该跨越到以下列。但是第二行中的以下列应该扩展到第三列。那是什么？我们可以满足一个条件或另一个条件，但不能同时满足这两个条件。
为什么我们不让半径也可以动画呢？...避免布局循环和崩溃 众所周知我们在布局期间不能更新视图状态。这会导致不可预测的结果，很可能会使 CPU 达到峰值。在此之前我们看到过这种情况，即闭包在布局期间运行时，也许当时不是太明显。...这是个老问题，我在 SwiftUI 刚发布的时候就写过此类问题，在 Safely Updating The View State [1] 一文中可以查看更多信息。 我还想再提一下潜在的崩溃。...这是可以实现的，因为缓存是一个 inout 参数，我们可以在 placeSubviews 中更新。...我经常认为这些视图是理所当然的，并将它们视为简单而不复杂的容器，好吧，尝试编写自己的版本，在各种情况下复制一个 HStack ，多种类型的视图和布局优先级竞争同一个空间。。。这是一个不错的挑战！
该代码建立在在 Swift 中使用 async let 并行的运行后台任务中编写的AsyncLetApp之上。...为什么要取消一个后台任务 与视图的交互可能会触发后台任务的运行，进一步的交互可能会使最初的请求过时，并触发后续的后台任务运行。除了浪费资源外，不取消初始任务可能会导致你的应用程序出现偶现和意外行为。...一个取消按钮被添加到视图中，其点击事件是在ViewModel中调用取消方法。...使用取消标志 有多种方法可以取消后台任务中的工作。...中的子任务 在 SwiftUI 中取消和恢复后台任务 结论 在异步编程中，重要的是停止任何不需要的后台任务以节省资源并避免后台任务干扰应用程序的任何不良副作用。
欢迎大家在 Discord 频道[2] 中进行更多地交流 在 上篇[3] 中，我们对 SwiftUI 布局过程中涉及的众多尺寸概念进行了说明。...相同的长相、不同的内涵 在 SwiftUI 中，我们可以利用不同的布局容器生成看起来几乎一样的显示结果。...例如，无论是 ZStack、overlay、background、VStack、HStack 都可以实现下图的版式。...而 overlay 和 background 的需求尺寸则完全取决于它们的主视图（ 本例中，overlay 的需求尺寸由 ButtonView 决定，background 的需求尺寸由 HeartView...，因此在 SwiftUI 中它们分别对应着不同的布局容器。
标识（ Identity ）是 SwiftUI 在程序的多次更新中识别相同或不同元素的手段，是 SwiftUI 理解你 app 的关键。...在 SwiftUI 应用代码中，绝大多数的视图标识都是通过结构性标识 （有关结构性标识的内容可以参阅 ViewBuilder 研究（下） —— 从模仿中学习[4]）来实现的 —— 通过视图层次结构（视图树...在 SwiftUI 中为视图设置显式标识目前有两种方式： 在 ForEach 的构造方法中指定 由于 ForEach 中的视图数量是动态的且是在运行时生成的，因此需要在 ForEach 的构造方法中指定可用来标识子视图的...新的问题 细心的朋友应该可以注意到，运行解决方案一的代码后，在第一次点击 bottom 按钮时，大概率会出现延迟情况（并不会立即开始滚动）。...scrollByUITableView_2022-04-23_19.44.26.2022-04-23 19_46_20 希望 SwiftUI 在之后的版本中能够改善上面的性能问题，这样就可以无需使用非原生方法也能达成好的效果
要在Xcode中预览画布上的视图并与之交互，请确保您的Mac运行的是macOS 10.15 beta版。 macOS 10.15 beta版下载地址 Xcode 11下载地址 ?...第六步 在面板中，Command+点按 Joshua Tree National Park唤起inspector，选择Embed in HStack。 ?...你不需要添加很多代码，就可以添加一个带mask、border、shadow的图片。 第一步 添加一张图片到asset catalog中。...在Resource文件夹中找到turtlerock.png图片，然后把它拖拽到asset catalog中。 第二步 选择File > New > File打开模版选择面板。...你可以MapKit中的MKMapView类来展示渲染地图界面。 在SwiftUI中要使用UIView或者其子类，你需要让你的view遵循UIViewRepresentable协议。
SwiftUI 中的尺寸 如上文中所示，在 SwiftUI 的布局过程中，在不同的阶段、出于不同的用途，尺寸这一概念是在不断地变化的。...而该自定义布局容器又会在它的 sizeThatFits 方法中通过调用其子视图代理（ Subviews，子视图在 Layout 协议中的表现方式 ）的 sizeThatFits 方法为子视图代理提供建议尺寸...return cache.cropBounds.size } 根据建议尺寸内容的不同，我们可以将建议尺寸细分为四种建议模式，在 SwiftUI 中，父视图会根据它的需求选择合适的建议模式提供给子视图...例如：ZStack 会将其父视图提供给它的建议模式直接转发给 ZStack 的子视图，而 VStack、HStack 则会要求子视图返回全部模式下的需求尺寸，以判断子视图是否为动态视图（ 在特定维度可以动态调整尺寸...在 SwiftUI 中，通过设置或调整建议模式而进行二次布局的场景很多，比较常用的有：frame、fixedSize 等。
而自那时过了两年后， SwiftUI 的发布才让这套机制有了更加合适的舞台。在 SwiftUI 发布初期，我也写过一本相关的书籍[3]，里面使用了一些类似的想法，但是很不完善。...可以说，从 iOS 14 开始，SwiftUI 才算逐渐进入了可用的状态。而最近随着公司的项目彻底抛弃 iOS 13，我也终于可以更多地正式在工作中用上 SwiftUI 了。...我们类比一下这些步骤在 SwiftUI 中的实现，可以发现步骤 4 其实已经包含在 SwiftUI 中了：当 @State 或 @ObservedObject 的 @Published 发生变化时，SwiftUI...在 SwiftUI 中，body 的刷新是 SwiftUI 运行时通过 @ObservedObject 属性包装所提供的特性。现在这部分内容被包含在了 WithViewStore 中。...虽然这需要我们自己去将 View 和 Model 绑定起来，会有些麻烦，但是如果你想要尽快尝试 TCA，却又不能使用 SwiftUI，也可以在 UIKit 中进行学习。
在Numbers 等应用程序中，水平条形图被定义为独立的图表类型，而不是垂直条形图。除了条形差异外，x轴和y轴的格式也需要不同。...Bar Chart with multiple data sets in SwiftUI SwiftUI 中的水平条形图 将条形图转换为水平 水平条形图不仅仅是在垂直条形图上的配置，有一些元素是可以重复使用的...，而不是水平的堆栈。...在水平条形图中，显示条形图上的数值并隐藏X轴可以使图表更简洁。 显示和隐藏水平条形图上的元素 结论 创建水平条形图的SwiftUI代码与创建垂直条形图的代码不同。...在创建垂直条形图时学到的技术可以重复使用，但最好将水平条形图视为与垂直条形图不同的图表。当我们深入到轴等组件时，可以看到两个图表中的轴线都是一样的，但是它们的标签和定位在x和y之间是换位的。
在 SwiftUI 中，我们可以通过 fixedSize 来强制一个视图以理想尺寸进行呈现： struct IdealSizeDemo: View { var body: some View {...SwiftUI 提供了两个版本的 fixedSize ，我们当前使用的版本要求视图在水平和垂直两个轴向上都使用理想尺寸，而另一个版本允许我们对单个轴向进行限定。...在 SwiftUI 中，我们可以通过 frame 来修改视图在理想状态下的呈现。...示例 所有的理论知识都是为实际应用而服务的。在本节中，我们将通过几个示例来展示 ViewThatFits 的功能。...总结 正如我们所看到的，ViewThatFits 是 SwiftUI 工具箱中的一个强大而灵活的组件，它可以帮助开发者优雅地解决多种布局挑战，提升应用程序的用户体验和界面适应性。
有多种方法可以在代码中定义颜色。最常用的方法是指定三种基色的值 - 红色、绿色和蓝色 (RGB)。本文通过指定色调、饱和度和亮度 (HSB) 的值来探索替代机制的使用。...可以在 SwiftUI 中创建一个调色板以显示可能的颜色。...色轮 在 HSB 颜色模型中，色调表示基色，可以通过围绕色环的角度（以度为单位）来指定，其中红色位于顶部，颜色沿顺时针方向跟随彩虹的颜色。...SwiftUI 使用 0 到 1 之间的值来表示从 0 到 360 度的色调值。以下代码在类似于在在 SwiftUI 中创建一个环形 Slider中的环形Slider用于显示色调选项。...SwiftUI 中查看匹配的颜色 色轮显示每种色调的匹配颜色 总结 我发现使用 HSB 定义颜色是一种更直观的颜色定义方式。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
