前言WWDC 24 已经结束，我决定开始写一些关于 SwiftUI 框架即将推出的新特性的文章。今年，苹果继续填补空白，引入了对滚动位置更细粒度的控制。本周，我们将学习如何操作和读取滚动偏移。...为了弥补这一不足，SwiftUI 引入了新的 ScrollPosition 类型，使我们能够通过偏移量、滚动视图的边缘、视图标识符等组合滚动位置。...新的 ScrollPosition 类型SwiftUI 框架引入了新的 ScrollPosition 类型，使我们能够通过偏移量、滚动视图的边缘、视图标识符等组合滚动位置。...总结在本文中，我们深入探讨了 SwiftUI 框架中 ScrollView 的新特性，特别是如何通过 ScrollPosition 类型实现更精确的滚动控制。...通过这些新功能，开发者可以更灵活地控制滚动视图的行为，从而创建更加流畅和直观的用户界面。希望这些内容对你有所帮助。
前言 WWDC 23 已经到来，SwiftUI 框架中有很多改变和新增的功能。在本文中将主要介绍 SwiftUI 中数据流、动画、ScrollView、搜索、新手势等功能的新变化。...动画 动画始终是 SwiftUI 框架中最重要的部分。在 SwiftUI 中轻松实现任何动画，但之前的框架版本缺少一些现在具有的功能。...框架引入了新的 PhaseAnimator 视图，它遍历阶段序列，允许为每个阶段提供不同的动画，并在阶段更改时更新内容。...ScrollView 今年 ScrollView 有了很多优秀的新增功能。首先，可以使用 scrollPosition 视图修饰符来观察内容偏移量。...scrollTargetLayout() } .scrollPosition(id: $scrollPosition) } } 如上例所示，使用 scrollPosition 视图修饰符将内容偏移量绑定到一个状态属性上
2、稍微复杂点View的布局思路和一些细节知识 3、SwiftUI循环轮播图 这次总结的首页的UI布局如下，我们下面一点点的解析： ?...有一个还得说明一下，GeometryReader 改变了它显示内容的方式。在 iOS 13.5 中，内容放置方式为 .center。在 iOS 14.0 中则为：.topLeading。...3、再提一点关于上面说的滚动视图，在UIKit中我们可以用UICollectionView搞定一切，但是在SwiftUI中没有这个控件，我建议采用的方式是 ScrollView + HStack + VStack...的方式去实现，很多同行有说目前来看SwiftUI的List在数据量大的情况下性能不是特别好，采用ScrollView是个不错的方式，而且也很容易构建出来，并不是说每一个Item的位置都需要你去计算，...在 iOS 13.5 中，内容放置方式为 .center。
要了解有关 scrollTargetLayout 视图修饰符的更多信息，请查看我的文章《掌握 SwiftUI 中的 ScrollView：滚动几何》。...应用场景我们还将 onScrollTargetVisibilityChange 视图修饰符附加到 ScrollView 上，提供标识符类型和操作闭包。...对于这些情况，SwiftUI 框架引入了 onScrollVisibilityChange 视图修饰符，你可以将其附加到 ScrollView 内的任何视图上以处理其可见性。...默认情况下，SwiftUI 框架使用 0.5 作为阈值，这意味着至少 50% 的视图需要可见，SwiftUI 才会运行操作。但你可以轻松调整此值。...总结今天，我们学习了如何跟踪 ScrollView 内特定视图的可见性，并监控可见标识符列表。示例展示了如何使用 SwiftUI 的滚动可见性修饰符来增强用户体验和交互性。希望能对你有所帮助。
但在 SwiftUI 的发展史上，ScrollView 一直处于“残废”的状态，直到 SwiftUI 6.0 才逐渐补齐短板。下面详细讲解 SwiftUI 中 ScrollView 的进化史。...，参数3：滚动内容 ScrollView(.vertical, showsIndicators: false) { Text("SwiftUI").padding...import SwiftUI struct ContentView: View { var body: some View { ScrollView([.vertical...import SwiftUI struct ContentView: View { var body: some View { ScrollView {...可视内容的改变。
SwiftUI 是一个强大的框架，它简化了在苹果平台上构建用户界面的过程。SwiftUI 中的一个基本组件是 ScrollView，它允许用户通过滚动导航内容。...高级滚动几何跟踪ScrollGeometry 提供了许多有价值的属性，如内容偏移、边界、容器大小、可见矩形、内容插入和内容大小。开发者可以提取单个属性或组合多个属性以获得全面的见解。...完整代码示例分析下面是一个完整的 SwiftUI Demo，其中包含了我们刚刚讨论的 ScrollView、ScrollGeometry 和 onScrollGeometryChange 的使用示例。...AdvancedContentView: 展示更高级的滚动几何追踪功能，追踪内容大小和可见矩形的变化。ScrollViewDemoApp: 包含 TabView，方便在基本和高级示例之间切换。...总结今天，我们探讨了 SwiftUI 中的新 ScrollGeometry 类型和 onScrollGeometryChange 视图修饰符。
前言WWDC 24 已经到来，我们有很多内容要讨论。每年，SwiftUI 都会通过引入更多功能来赶上 UIKit。今年也不例外。让我们深入了解 SwiftUI 框架引入的新功能。...SwiftUI 引入了新的 Subview 和 SubviewsCollection 类型，提供了对真实视图的代理访问。...滚动位置新的 ScrollPosition 类型与 scrollPosition 视图修饰符配对，允许我们读取 ScrollView 实例的精确位置。我们还可以使用它编程地滚动到滚动内容的特定点。...框架的下一版本包括许多新 API，如窗口推送、TextField 和 TextEditor 视图中的文本选择观察、搜索焦点监控、自定义文本渲染、新的 MeshGradient 类型等等，我无法在一篇文章中涵盖所有内容...这些改进使开发者能够创建更灵活和高效的用户界面。SwiftUI还引入了许多新的API，如窗口推送、文本选择观察、搜索焦点监控等，使开发更加便捷和强大。
但在 SwiftUI 的发展史上，ScrollView 一直处于“残废”的状态，直到 SwiftUI 6.0 才逐渐补齐短板。下面详细讲解 SwiftUI 中 ScrollView 的进化史。...SwiftUI 1.0可以垂直与水平滚动。...ScrollView(.vertical, showsIndicators: false) { Text("SwiftUI").padding(20)...} .scrollTargetBehavior(.paging) // 分页 .padding() }}新增scrollPosition修饰符，用于设置内容的偏移与滚动后内容停留的位置...可视内容的改变。
在 SwiftUI 5.0 中，苹果大幅强化了 ScrollView 功能。新增了大量新颖、完善的 API。本文将对这些新功能进行介绍，希望能够让它们更多、更早的帮助到有需要的开发者。...对于全面屏的额外安全区域，safeAreaInset 和 safeAreaPadding 的处理逻辑不一致。 例如，下面的两种实现中，ScrollView 的底部空间是不同的。...应将此修饰符应用于 ScrollView 中包含主要重复内容的布局容器，如 LazyHStack 或 VStack。...总结 我完全没有想到，在 SwiftUI 5 中，苹果对 ScrollView 进行了全面增强。值得赞赏的是，他们不仅提供了一些一直期待的功能，而且在 API 的设计和实现完成度上都非常出色。...就我个人而言，在 SwiftUI 5 中，ScrollView 的原生方案已经能够满足大多数需求，因此我们将看到更多人采用 ScrollView + LazyStack 的组合方式。
GeometryReader 打破了 SwiftUI 声明式编程的理念，使得需要直接操作视图框架，更接近命令式编程。...使用 GeometryReader 需要编写大量的辅助代码来计算和调整框架，这会增加编码量，降低代码的可读性和可维护性。...一个容器视图，根据其自身大小和坐标空间定义其内容。 严格来讲，我并不完全赞同上述描述。这并非因为存在事实上的错误，而是这种表述可能会引起用户的误解。...本章节包含了许多关于 SwiftUI 的尺寸和布局的知识。...请阅读 用 SwiftUI 的方式进行布局[9] 和 在 SwiftUI 中实现视图居中的若干种方法[10] 两篇文章，以了解面对同一个需求，SwiftUI 有多种布局手段。
它使用 @ViewBuilder 闭包包裹了内容，并添加了一个圆角背景和阴影。...想了解更多关于 @ViewBuilder 闭包的内容，可以查看我关于 “SwiftUI 中 @ViewBuilder 的强大功能” 的文章。...，我将提供一个可以展示如何使用 SwiftUI 新的容器视图 API 构建自定义视图的简单示例，包含 Card、Carousel 和 Magazine 容器视图。...: some Scene { WindowGroup { ContentView() } }}功能概述Card：一个简单的容器视图，可以包裹任何内容并添加背景和阴影...总结通过使用 SwiftUI 新引入的 API 以及容器视图，你可以轻松构建具有良好复用性的自定义布局，提升应用的开发效率和代码可维护性。
苹果不仅带来了全新形态的硬件产品，还推出了几个相当震撼的新框架。本文将聊聊我对本届 WWDC 中 SwiftUI 5.0 和 SwiftData 的初步印象。...大幅改善了 ScrollView 的控制力 本次升级中，为 ScrollView 带来了新的动态滚动定位系统（ 不依赖 ScrollViewReader 和显式的 id 声明）、一次性的定位系统（ 在视图进入后...）、支持分页滚动（ 开发者长期盼望的 ）、自定义滚动内容的缩进、为滚动内容（非滚动容器）添加安全区域等众多功能。...SwiftData 经过开发者长时间的期盼，苹果终于推出了基于 Swift 开发的对象图管理和持久化框架 —— SwiftData。...在接下来的一段时间里，我将在博客中介绍和探讨 SwiftUI、SwiftData 以及几个我比较感兴趣的新框架 TipKit 和 CKSyncEngine。
访问我的博客 www.fatbobman.com[1] 可以获得更好的阅读体验以及最新的更新内容。...遗憾的是，SwiftUI 并没有提供这方面的 API 。本文将介绍几种在 SwiftUI 中获取当前滚动状态的方法，每种方法都有各自的优势和局限性。...和 List .introspectScrollView { scrollView in scrollView.delegate = delegate...判断的准确度没有前两种方式高当可滚动组件中的内容出现了非滚动引起的尺寸或位置的变化（ 例如 List 中某个视图的尺寸发生了动态变化 ），本方式会误判断为发生了滚动，但在视图的变化结束后，状态会马上恢复到滚动结束滚动开始后...我正以聊天室、Twitter、博客留言等讨论为灵感，从中选取有代表性的问题和技巧制作成 Tips ，发布在 Twitter 上。
在此次 WWDC 中，苹果一如既往地展现了对 Swift 的热情和更开放的态度。除了继续加大对社区的支持，苹果推出的新官方框架和应用显著提升了 Swift 的应用广度。...从这个版本开始，SwiftUI 开发团队似乎找到了快速发展 SwiftUI 的正确路径，探索出了在保持声明式框架特性的同时，有效提升其表现力的方法。...随着 SwiftUI 与 UIKit 框架之间动画、转场和手势等机制的共享，SwiftUI 正逐渐从仅基于 UIKit/AppKit 的框架，转变为与苹果生态中其他 UI 框架更平等的合作伙伴。...它不再仅是汲取其他框架的功能，而是开始具备了反哺其他框架新特性的能力。 新版本的 SwiftUI 框架还在代码层面进行了分层处理，单独划分出了 SwiftUICore 框架。...)[4] SwiftUI ScrollView, but better[5] by Alex Logan[6] Hello Adaptive Tab Views[7] by Alex Logan[8]
以下是学习 SwiftUI 框架的详细步骤和建议：### 1. 初步理解 SwiftUISwiftUI 是一种声明式框架，允许你使用简单、直观的代码构建用户界面。...深入学习与进阶在掌握了基础知识后，开始探索 SwiftUI 的高级特性和与其他框架的集成。...以上只是控制整个容器的偏移量，如果我要容器置顶或置底怎么处理?SwiftUI怎么置顶显示?在 SwiftUI 中，如果你希望将某个视图置顶显示（即固定在视图的顶部），有几种常见的方式。...使用 `ScrollView` 与 `.frame()` 控制如果你的视图内容超出屏幕范围，你可以使用 `ScrollView` 并结合 `.frame(maxHeight: .infinity)` 来控制视图的布局...通过合理运用 `VStack`、`ZStack`、`GeometryReader` 以及 `ScrollView`，你可以灵活地控制视图的位置和层级，确保重要的内容始终在顶部显示。
本文将通过用多种手段完成同一需求的方式，展示 SwiftUI 布局系统的强大与灵活，并通过这些示例让开发者对 SwiftUI 的布局逻辑有更多的认识和理解。...有关这方面的内容，请参阅 SwiftUI 布局 —— 尺寸（ 下 ）[4] 一文中“面子和里子”章节。...有关建议尺寸、需求尺寸等内容，请参阅 SwiftUI 布局 —— 尺寸（ 上 ）[5] 一文 三、NameSpace 从 3.0 版本（ iOS 15 ）开始，SwiftUI 提供了新的 NameSpace...这意味着，在 ScrollView 中，子视图最好明确的设定尺寸（ 提出明确地需求尺寸 ）。因此，在上面的代码中，需要通过屏幕高度和视图一的高度差来计算上方的空白站位视图高度。...有关转场动画的更多内容，请参阅 SwiftUI 的动画机制[8] 一文 八、Layout 协议 在 4.0 版本中，SwiftUI 增加了 Layout 协议，通过该协议，开发者可以针对特定的场景，创建自定义布局容器
本文将通过用多种手段完成同一需求的方式，展示 SwiftUI 布局系统的强大与灵活，并通过这些示例让开发者对 SwiftUI 的布局逻辑有更多的认识和理解。 可在 此处 获取本文代码。...有关这方面的内容，请参阅 SwiftUI 布局 —— 尺寸（ 下 ） 一文中“面子和里子”章节。...有关建议尺寸、需求尺寸等内容，请参阅 SwiftUI 布局 —— 尺寸（ 上 ） 一文 三、NameSpace 从 3.0 版本（ iOS 15 ）开始，SwiftUI 提供了新的 NameSpace...这意味着，在 ScrollView 中，子视图最好明确的设定尺寸（ 提出明确地需求尺寸 ）。因此，在上面的代码中，需要通过屏幕高度和视图一的高度差来计算上方的空白站位视图高度。...有关转场动画的更多内容，请参阅 SwiftUI 的动画机制 一文 八、Layout 协议 在 4.0 版本中，SwiftUI 增加了 Layout 协议，通过该协议，开发者可以针对特定的场景，创建自定义布局容器
SwiftUI案例：3D旋转图片播放器 效果 目标 实现多张图片的3D切换查看功能 外观配置 任选 7 张任意尺寸的图片按 p1 至 p7 进行命名并拖拽进 Assets.xcassets 文件中（如图所示...some View { Home() } } 控件视图 CarouseBodyView.swift 通过视图容器的嵌套布局，实现 Home.swift 中组件的文本与图片的具体内容...frame = proxy.frame(in: .global) DispatchQueue.main.async { //基于锚点设置偏移量...} } return Color.clear } ) } } //为ScrollView...和tab视图定义修饰器 //枚举锚点位置 enum Anchor { case top case bottom case leading case trailing }
A：你最好的选择是使用 ScrollView 和 ScrollViewReader，并在 onAppear 或新内容进来时滚动到最底部的视图。我不建议尝试旋转滚动视图。...另外，sheet 和 alert 的内容都采用了 ViewBuilders，所以你可以以类似于处理 toolbar 内容的方式将其提取到函数或计算属性中。...image-20221023171100484滚动速度Q：有好的方式在 List 和 ScrollView 滑动时监听滑动的 velocity 值么？...在 SwiftUI 中，有一个从第一版开始就存在但尚未公开的纯 SwiftUI 实现的滚动容器 —— _ScrollView 。...但这个滚动有两大问题，1、是一个未公开的半成品，有可能会被从 SwiftUI 框架中移除；2、不支持懒加载，即使和 Lazy 视图一起使用也会一次性加载全部的视图。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
腾讯会议
云直播
对象存储
