前言我们的滚动 API 中又有一个重要的新增功能：滚动可见性。现在，你可以获取可见标识符列表，或者快速检查并监控 ScrollView 内视图的可见性状态。...同样，当视图从可见状态转换为不可见状态，即显示的视口部分少于 10% 时，也会运行该闭包。...运行这个 Demo，你会看到一个带有多个文本视图的 ScrollView，当你滚动时，控制台会打印当前可见的项。...此外，在页面底部有一个视频播放器，当视频播放器出现在视口内时，它会自动播放，当其离开视口时，会自动暂停。总结今天，我们学习了如何跟踪 ScrollView 内特定视图的可见性，并监控可见标识符列表。...示例展示了如何使用 SwiftUI 的滚动可见性修饰符来增强用户体验和交互性。希望能对你有所帮助。
视图的性能优化Q：面对复杂的用户界面时，控制视图中的更新范围的最佳做法是什么（ 以避免不需要的转发以及重复计算 ）。...我采用了常见的解决方案，即旋转滚动视图和里面的每个单元格，以获得预期的倒置列表，在 iOS 上，这很有效。但在 macOS 上，它使 CPU 使用率保持在 100%。...阅读 SwiftUI 的动画机制[16] 一文，了解更多有关动画的内容。...贴一个临时的解决方案。image-20221023171100484滚动速度Q：有好的方式在 List 和 ScrollView 滑动时监听滑动的 velocity 值么？...在 SwiftUI 中，有一个从第一版开始就存在但尚未公开的纯 SwiftUI 实现的滚动容器 —— _ScrollView 。
动画 动画始终是 SwiftUI 框架中最重要的部分。在 SwiftUI 中轻松实现任何动画，但之前的框架版本缺少一些现在具有的功能。...每当用户滚动视图时，它会通过设置第一个可见视图的标识来更新绑定。...它允许在滚动视图中启用分页。 搜索 与搜索相关的视图修饰符也有一些很好的新增功能。例如，可以通过编程方式聚焦到搜索字段。...，允许调整列表中的间距。...Swift Charts 也具有可滚动和可动画的功能。
在这个测试中，我们将通过整个消息列表三次滚动。没有 AnyView下面是没有泛型实现的动画卡顿记录。...如你所见，有几个动画卡顿，其中 2 个是橙色的，这意味着卡顿持续时间超过了可接受的延迟时间 33 毫秒。因此，在这 2 种情况下，将会丢失一帧。这 2 个卡顿发生在加载新消息并将其附加到消息列表时。...以下是动画卡顿仪器配置文件中的结果。你可以在此示例中看到一些更多的橙色。有更多的动画卡顿超过了可接受的延迟时间 33 毫秒。这导致在执行测试时在仪器和视觉上都出现一些可见的卡顿。...此外，当你再次浏览列表时，性能不会改善（甚至变得更糟）。这是有道理的，因为 SwiftUI 不知道它已经显示过此视图一次（因为它隐藏在 AnyView 下）。...为了更好地理解结果，我们需要深入了解 SwiftUI 的工作原理。在这个关于 SwiftUI 性能的 WWDC 会话中，来自 SwiftUI 团队的 Raj 讨论了列表或表需要提前知道所有标识符。
革命性的动画和视觉效果升级 SwiftUI 原本欠缺一些高级的动画和视觉功能在本次升级中一并被补上了，而且苹果大幅更新了动画、转场、Shape、效果等方面的内部实现。...总之，当前制约动画或视觉效果的将不再是 SwiftUI 的能力，而是开发者的创意。...，直接定位到滚动视图的特定位置，只能使用一次 ）、全新的滚动条控制（ 闪烁 ）、可自定义行视图在滚动区域的顶端和显示区域的显示状态（ 例如可用其实现类似 watchOS 中的滚动到顶端子视图缩小的视觉效果...）、支持分页滚动（ 开发者长期盼望的 ）、自定义滚动内容的缩进、为滚动内容（非滚动容器）添加安全区域等众多功能。...欢迎你通过 Twitter[5]、 Discord 频道[6] 或博客的留言板与我进行交流。 订阅下方的 邮件列表[7]，可以及时获得每周最新文章。
每年，SwiftUI 都会通过引入更多功能来赶上 UIKit。今年也不例外。让我们深入了解 SwiftUI 框架引入的新功能。...英雄动画SwiftUI 引入了 matchedTransitionSource 和 navigationTransition，我们可以在任何 NavigationLink 实例中配对使用。...滚动位置新的 ScrollPosition 类型与 scrollPosition 视图修饰符配对，允许我们读取 ScrollView 实例的精确位置。我们还可以使用它编程地滚动到滚动内容的特定点。...框架的下一版本包括许多新 API，如窗口推送、TextField 和 TextEditor 视图中的文本选择观察、搜索焦点监控、自定义文本渲染、新的 MeshGradient 类型等等，我无法在一篇文章中涵盖所有内容...今年的主要变化包括 @MainActor 隔离、视图集合的新重载、新的可定制标签栏体验、英雄动画、滚动位置的新功能以及新的 Entry 和 Previewable 宏。
，进入后列表滚动流畅且可无延迟的响应滚动到列表底部或顶部的指令。...新的问题 细心的朋友应该可以注意到，运行解决方案一的代码后，在第一次点击 bottom 按钮时，大概率会出现延迟情况（并不会立即开始滚动）。...通过对视觉的欺骗，仅需实例化少量的子视图即可完成滚动动画（同最初的预计一致），从而提高效率。...我们将通过 SwiftUI-Introspect[7] 来实现在 List 中滚动到列表两端。...，并在首次滚动到列表底部时也没有延迟。
前言WWDC 24 已经结束，我决定开始写一些关于 SwiftUI 框架即将推出的新特性的文章。今年，苹果继续填补空白，引入了对滚动位置更细粒度的控制。本周，我们将学习如何操作和读取滚动偏移。...我们还放置了两个按钮，允许你快速滚动到滚动视图中的第一个或最后一个项目。ScrollPosition 类型提供了许多重载的 scrollTo 函数，使我们能够处理不同的情况。...为滚动添加动画通过附加动画视图修饰符并传递 ScrollPosition 类型的实例作为 value 参数，我们可以轻松地为编程滚动添加动画。...ScrollPosition 提供了可选的 edge、point 和 viewID 属性，以在你编程滚动时读取值。每当用户与滚动视图交互时，这些属性将变为 nil。...每当滚动视图滚动时，geometry?.contentBounds.origin 将提供当前滚动位置的偏移量。
最近的一个活动页面需要做一个可以左右滑动的抽签效果，故通过用css的transform属性和js结合来模拟可以无限滚动的效果。...无限滚动原理 由于这里的停止位置是固定的，前排永远是当前卡片相对于视口居中，后排永远是两个卡片相对于视口居中，且每个卡片是一样的，所以当卡片列表向前或向右移动到一个目标位置时，都将列表重置为初始位置继续滚动...如下图以前排卡片为例： 1544756683_12_w2480_h1496.png 所以当滚动停止后会统一将列表样式设置为transform: translateX(0)。...连续滑动判断 当在上次滑动动画还未播放结束时用户又进行了第二次滑动时，需要执行一下操作： 1)....取消第二次滑动时的动画播放和位移重置 // 若是上次动画未结束不需要再次启动动画和重置目标位移 if( this.ani_move && this.fingerTouch == false) { } else
当 scrollClipDisable 为 false 时，滚动内容会被裁剪以适应滚动容器边界。任何超出边界的部分将不会显示。...当 scrollClipDisable 为 true 时，滚动内容不会被裁剪。它可以延伸超出滚动容器的边界，从而显示更多内容。...（视图标识） 不支持锚点设定，固定锚点为子视图的 center 正如 优化在 SwiftUI List 中显示大数据集的响应效率[6] 一文所提到的，当数据集很大时，也会出现性能问题。...滚动停止时，容器顶端将与子视图的顶部对齐（在垂直模式下）。开发者可以通过控制 scrollTargetLayout 的启用与否来开关 viewAligned 的行为。...当子视图滑入和滑出包含它的滚动视图的可视区域时，scrollTransition 会对该视图应用给定的过渡动画，并在不同阶段之间平滑地过渡。
这些控件基本上都是对 UIkit（AppKit）的二次包装。Sheet执行下面的代码，你可以清楚地看到，在通过手势取消 Sheet 时，与其关联的状态是在 Sheet 完成取消动画后才发生了改变。...当视图正在滚动时返回上一层视图会导致应用崩溃这是一个由 xiaogd 在我的 Discord 论坛中提出的 问题。...请至少进入第三级视图滚动当前视图当视图处于滚动状态时，点击 NavigationStack 左上角的 “Back” 按钮。...由于在返回上层视图时，状态尚未更新，因此在清理 AG 时（返回动画运行中），会破坏应用程序的 AttributeGraph 完整性，从而导致应用程序死锁或崩溃。...希望 SwiftUI 开发组能尽早重视这些问题。欢迎你通过 Twitter、 Discord 频道 或博客的留言板与我进行交流。订阅下方的 邮件列表，可以及时获得每周最新文章。
前言SwiftUI 引入了一组视图修饰符，使我们能够有效地管理视图中的安全区域。在许多情况下，安全区域是你希望放置内容的地方。...今天，我们将了解 SwiftUI 引入的新内容边距概念以及它与安全区域的区别。创建示例让我们从一个简单的示例开始，演示带有一百个项目的列表。...幸运的是，SwiftUI 引入了新的 contentMargins 视图修饰符，使我们能够在视图中移动特定类型的内容。...但是它将滚动条保留在视图的后导边缘。contentMargins 视图修饰符接受几个参数，允许我们调整其行为。第一个参数是我们想要移动的边缘。...总结本文介绍了 SwiftUI 中的内容边距管理，通过对比安全区域的概念，解释了内容边距的重要性。文章从创建示例开始，展示了在列表视图中如何处理内容边距的问题。
比如在 SwipeCell[3] 中，需要在可滚动组件开始滚动时，自动关闭已经打开的侧滑菜单。遗憾的是，SwiftUI 并没有提供这方面的 API 。...本文将介绍几种在 SwiftUI 中获取当前滚动状态的方法，每种方法都有各自的优势和局限性。...iOS 系统在 macOS 下的 eventTracking 模式中，该方案的表现并不理想屏幕中只能有一个可滚动控件由于任意可滚动控件滚动时，都会导致主线程的 Runloop 切换至 tracing...（ 状态已变化为滚动中 ），保持手指处于按压状态并停止滑动，此方式会将此时视为滚动结束，而前两种方式仍会保持滚动中的状态直到手指结束按压IsScrolling我将后两种解决方案打包做成了一个库 —— IsScrolling...每周也会对当周博客上的新文章以及在 Twitter 上发布的 Tips 进行汇总，并通过邮件列表的形式发送给订阅者。订阅下方的 邮件列表[9]，可以及时获得每周的 Tips 汇总。
革命性的动画和视觉效果升级 SwiftUI 原本欠缺一些高级的动画和视觉功能在本次升级中一并被补上了，而且苹果大幅更新了动画、转场、Shape、效果等方面的内部实现。...总之，当前制约动画或视觉效果的将不再是 SwiftUI 的能力，而是开发者的创意。...，直接定位到滚动视图的特定位置，只能使用一次 ）、全新的滚动条控制（ 闪烁 ）、可自定义行视图在滚动区域的顶端和显示区域的显示状态（ 例如可用其实现类似 watchOS 中的滚动到顶端子视图缩小的视觉效果...）、支持分页滚动（ 开发者长期盼望的 ）、自定义滚动内容的缩进、为滚动内容（非滚动容器）添加安全区域等众多功能。...一开始看到这些信息时，我内心无比兴奋，但很快就平静下来了，最终还有些无奈。 对于绝大多数开发者来说，一旦能够在应用中使用这些新功能，苹果或许又会带来更多的新诱惑。
是否有任何建议用来检测列表中的行选择，类似于 “NavigationLink”，但不导航到另一个视图（例如，显示 Sheet 或从列表中选择一个选项 ）？...在单元测试中，很难对 SwiftUI 视图中的依赖（ 符合 DynamicProperty 协议 ）进行测试。这也是 Redux-like 框架的优势之一（ 将状态从视图中抽离出来，方便测试 ）。...假设我们想创建一个类似于 iMessage 的视图，在那里你可以看到一个信息列表（与本例无关），在视图的底部有一个文本框。当用户点击文本字段时，键盘会在其工具栏中出现一个文本字段。...阅读 SwiftUI 的动画机制[8] 一文，了解更多有关动画的内容。自适应高度 SheetQ：如何在 iOS16 中呈现与动态内容高度相匹配的 Sheet？...每周也会对当周博客上的新文章以及在 Twitter 上发布的 Tips 进行汇总，并通过邮件列表的形式发送给订阅者。订阅下方的 邮件列表[25]，可以及时获得每周的 Tips 汇总。
在上面的代码中，由于两个视图使用了同样的动画曲线设定，因此，在移动时并不会出现分离的情况。...四、ScrollView 考虑到本文需求的动画形态（ 竖向滚动 ），使用 ScrollViewReader 提供的滚动定位功能，同样可以满足需求。...ScrollView 会使用父视图给定的全部建议尺寸创建滚动区域，但在询问其子视图的需求尺寸时只会提供理想尺寸。...七、Transition 通过为视图设定 Transition（ 转场 ），在视图插入或将其移出视图树时，SwiftUI 将自动生成对应的动画效果。...有关转场动画的更多内容，请参阅 SwiftUI 的动画机制[8] 一文 八、Layout 协议 在 4.0 版本中，SwiftUI 增加了 Layout 协议，通过该协议，开发者可以针对特定的场景，创建自定义布局容器
Sheet 执行下面的代码，你可以清楚地看到，在通过手势取消 Sheet 时，与其关联的状态是在 Sheet 完成取消动画后才发生了改变。...（动画结束时），立即在屏幕上由左至右滑动，返回上一层视图 在滑动返回到上一层视图后，应用会锁死。...当视图正在滚动时返回上一层视图会导致应用崩溃 这是一个由 xiaogd 在我的 Discord 论坛中提出的 问题[3]。...请至少进入第三级视图 滚动当前视图 当视图处于滚动状态时，点击 NavigationStack 左上角的 “Back” 按钮。...由于在返回上层视图时，状态尚未更新，因此在清理 AG 时（返回动画运行中），会破坏应用程序的 AttributeGraph 完整性，从而导致应用程序死锁或崩溃。
在上面的代码中，由于两个视图使用了同样的动画曲线设定，因此，在移动时并不会出现分离的情况。...四、ScrollView 考虑到本文需求的动画形态（ 竖向滚动 ），使用 ScrollViewReader 提供的滚动定位功能，同样可以满足需求。...ScrollView 会使用父视图给定的全部建议尺寸创建滚动区域，但在询问其子视图的需求尺寸时只会提供理想尺寸。...七、Transition 通过为视图设定 Transition（ 转场 ），在视图插入或将其移出视图树时，SwiftUI 将自动生成对应的动画效果。...有关转场动画的更多内容，请参阅 SwiftUI 的动画机制 一文 八、Layout 协议 在 4.0 版本中，SwiftUI 增加了 Layout 协议，通过该协议，开发者可以针对特定的场景，创建自定义布局容器
，会自动将其设置为当前高亮关键字并滚动至视图中心位置scrollTo_keyword2_2022-08-22_09.06.20.2022-08-22 09_07_57在对话数据较多的情况下（上千条）不应有性能瓶颈解决思路一千个人眼中有一千个哈姆雷特...请阅读 优化在 SwiftUI List 中显示大数据集的响应效率[6] 以及 避免 SwiftUI 视图的重复计算[7] 两篇文章，了解更多有关性能优化方面的内容通过 currentPostion 获取需要滚动到的...onAppear，每个视图退出显示窗口时都会调用它的 onDisapper。...每周也会对当周博客上的新文章以及在 Twitter 上发布的 Tips 进行汇总，并通过邮件列表的形式发送给订阅者。订阅 邮件列表[14]，可以及时获得每周的 Tips 汇总。.../posts/swiftUILifeCycle/[10] 在 SwiftUI 视图中打开 URL 的若干方法: https://www.fatbobman.com/posts/open_url_in_swiftUI
HomeBannerView() .environmentObject(homeViewModel) /// 服务列表...通过它我们可以避免在初始 View 时创建 ObservableObject, 而是从环境中获取 ObservableObject，像 @EnvironmentObject，@ObservedObject...3、再提一点关于上面说的滚动视图，在UIKit中我们可以用UICollectionView搞定一切，但是在SwiftUI中没有这个控件，我建议采用的方式是 ScrollView + HStack + VStack...循环轮播实现 ---- 总结一下循环轮播怎么实现，采用的方案就是 HStack + Gesture + Timer 的方式，这三者就能实现一个自动循环滚动或者手动滚动的轮播。...区别于我们UIKit的创建方式，SwiftUI对它进行了简化，具体的创建如下： /// SwiftUI对定时器的简化，可以进去看看具体参数的定义 private let timer = Timer.publish
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
腾讯会议
对象存储
云直播
