但在 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 {...import SwiftUI struct ContentView: View { var body: some View { ScrollView(.horizontal,
介绍ScrollView 即滚动视图,在 iOS 开发中扮演着非常重要的角色。...但在 SwiftUI 的发展史上,ScrollView 一直处于“残废”的状态,直到 SwiftUI 6.0 才逐渐补齐短板。下面详细讲解 SwiftUI 中 ScrollView 的进化史。...SwiftUI 1.0可以垂直与水平滚动。...(.vertical, showsIndicators: false) { Text("SwiftUI").padding(20) Divider...新增scrollTargetLayout修饰符,用于告知 ScrollView 偏移的参照者,常用于修饰 ScrollView 中的各种 Stack。
SwiftUI 是一个强大的框架,它简化了在苹果平台上构建用户界面的过程。SwiftUI 中的一个基本组件是 ScrollView,它允许用户通过滚动导航内容。...在使用 onScrollGeometryChange 视图修饰符时,我们将 ScrollData 作为转换闭包的返回类型,从 ScrollGeometry 实例中提取所有所需的数据。...完整代码示例分析下面是一个完整的 SwiftUI Demo,其中包含了我们刚刚讨论的 ScrollView、ScrollGeometry 和 onScrollGeometryChange 的使用示例。...systemImage: "2.square.fill") } } } }}如何运行打开 Xcode 并创建一个新的 SwiftUI...总结今天,我们探讨了 SwiftUI 中的新 ScrollGeometry 类型和 onScrollGeometryChange 视图修饰符。
前言WWDC 24 已经结束,我决定开始写一些关于 SwiftUI 框架即将推出的新特性的文章。今年,苹果继续填补空白,引入了对滚动位置更细粒度的控制。本周,我们将学习如何操作和读取滚动偏移。...var body: some View { ScrollView { LazyVStack { ForEach(0..SwiftUI 引入了新的 ScrollPosition 类型,使我们能够通过偏移量、滚动视图的边缘、视图标识符等组合滚动位置。...新的 ScrollPosition 类型SwiftUI 框架引入了新的 ScrollPosition 类型,使我们能够通过偏移量、滚动视图的边缘、视图标识符等组合滚动位置。...总结在本文中,我们深入探讨了 SwiftUI 框架中 ScrollView 的新特性,特别是如何通过 ScrollPosition 类型实现更精确的滚动控制。
要了解有关 scrollTargetLayout 视图修饰符的更多信息,请查看我的文章《掌握 SwiftUI 中的 ScrollView:滚动几何》。...对于这些情况,SwiftUI 框架引入了 onScrollVisibilityChange 视图修饰符,你可以将其附加到 ScrollView 内的任何视图上以处理其可见性。...默认情况下,SwiftUI 框架使用 0.5 作为阈值,这意味着至少 50% 的视图需要可见,SwiftUI 才会运行操作。但你可以轻松调整此值。...pause() } } }}在上述示例中,我们定义了阈值,这意味着 SwiftUI 将在视图至少有 10% 可见时运行操作闭包。...总结今天,我们学习了如何跟踪 ScrollView 内特定视图的可见性,并监控可见标识符列表。示例展示了如何使用 SwiftUI 的滚动可见性修饰符来增强用户体验和交互性。希望能对你有所帮助。
可采用 优化在 SwiftUI List 中显示大数据集的响应效率[5] 一文中介绍的方式来解决。 scrollPostion(id:) 使用此修饰符可以让滚动视图滚动到特定的位置。...(视图标识) 不支持锚点设定,固定锚点为子视图的 center 正如 优化在 SwiftUI List 中显示大数据集的响应效率[6] 一文所提到的,当数据集很大时,也会出现性能问题。...就我个人而言,在 SwiftUI 5 中,ScrollView 的原生方案已经能够满足大多数需求,因此我们将看到更多人采用 ScrollView + LazyStack 的组合方式。...的 Safe Area: https://www.fatbobman.com/posts/safeArea/ [5] 优化在 SwiftUI List 中显示大数据集的响应效率: https://www.fatbobman.com.../posts/optimize_the_response_efficiency_of_List/ [6] 优化在 SwiftUI List 中显示大数据集的响应效率: https://www.fatbobman.com
学完本教程后,你就可以在你的 App 中把这种 3D 效果加入任何自定义的 SwiftUI 视图。下面我们来开始本教程的学习。 入门 首先,创建一个新的 SwiftUI 视图。...ColorList_Previews: PreviewProvider { static var previews: some View { ColorList() } } 颜色数据...在 ScrollView 嵌套中添加一个 HStack,如下: var body: some View { ScrollView(.horizontal, showsIndicators: false...HStack(alignment: .center, spacing: 50) { } } } 展示矩形 我们使用 ForEach 在 HStack 内部根据 colors 中的数据分别创建不同颜色的矩形...Effect: https://levelup.gitconnected.com/swiftui-3d-scroll-effect-fa5310665738
前言自 SwiftUI 的第一个版本发布以来,它就拥有了几种容器视图。最常用的有 HStack、VStack、List 等。...Carousel: View { @ViewBuilder var content: Content var body: some View { ScrollView...Magazine: View { @ViewBuilder var content: Content var body: some View { ScrollView...我们还利用了 id 参数的功能,允许我们使用 ForEach 视图与普通数据一起工作。...Carousel: View { @ViewBuilder var content: Content var body: some View { ScrollView
前言 WWDC 23 已经到来,SwiftUI 框架中有很多改变和新增的功能。在本文中将主要介绍 SwiftUI 中数据流、动画、ScrollView、搜索、新手势等功能的新变化。...数据流 Swift 5.9 引入了宏功能,成为 SwiftUI 数据流的核心。SwiftUI 不再使用 Combine,而是使用新的 Observation 框架。...动画 动画始终是 SwiftUI 框架中最重要的部分。在 SwiftUI 中轻松实现任何动画,但之前的框架版本缺少一些现在具有的功能。...ScrollView 今年 ScrollView 有了很多优秀的新增功能。首先,可以使用 scrollPosition 视图修饰符来观察内容偏移量。...struct ContentView: View { var body: some View { ScrollView { ForEach(1..<100
遗憾的是,SwiftUI 并没有提供这方面的 API 。本文将介绍几种在 SwiftUI 中获取当前滚动状态的方法,每种方法都有各自的优势和局限性。...Bool)手指拖动结束后( 手指离开时 ),调用此方法在 SwiftUI 中,很多的视图控件是对 UIKit( AppKit )控件的二次包装。...和 List .introspectScrollView { scrollView in scrollView.delegate = delegate...目前 SwiftUI 在内部的实现上去 UIKit( AppKit )化很明显,比如,本节介绍的方法在 SwiftUI 4.0 中已经失效方法二:Runloop我第一次接触 Runloop 是在学习 Combine...preference 与 onChange 的调用时机非常类似,只有在值发生改变后才会传递数据。在 ScrollView、List 发生滚动时,它们内部的子视图的位置也将发生改变。
,我们也能持续更新数据。...task(id:) 同时涵盖了 onAppear 和 onChange 的场景,是最可靠的数据获取方式。 另外,在某些情况下,GeometryReader 有可能返回尺寸为负数的数据。...如果直接将这些负数数据传递给 frame,就可能会出现布局异常(在调试状态下,Xcode 会用紫色的提示警告开发者)。因此,为了进一步避免这种极端情况,可以在传递数据时,将不符合要求的数据过滤掉。...在处理类似需求时,我们应优先采用更符合 SwiftUI 的思维方式来考虑布局方案,而非依赖某个特定的几何数据进行计算。...里子和面子:不同的尺寸数据 在 SwiftUI 中,有一些 modifier 是在布局之后,在渲染层面对视图进行的调整。
SwiftUI中的界面是严格数据驱动的:运行时界面的修改,只能通过修改数据来间接完成,而不是直接对界面进行修改操作。...A Single Source Of Truth: 保持单一数据源,在 SwiftUI 中不同视图之间如果要访问同样的数据,不需要各自持有数据,直接共用一个数据源即可,这样做的好处是无需手动处理视图和数据的同步...ObservableObject 在应用开发过程中,很多数据其实并不是在 View 内部产生的,这些数据有可能是一些本地存储的数据,也有可能是网络请求的数据,这些数据默认是与 SwiftUI 没有依赖关系的...数据流图 从上图可以看出SwiftUI 的数据流转过程: 用户对界面进行操作,产生一个操作行为 action 该行为触发数据状态的改变 数据状态的变化会触发视图重绘 SwiftUI 内部按需更新视图,...最终再次呈现给用户,等待下次界面操作 注意 在 SwiftUI 中,开发者只需要构建一个视图可依赖的数据源,保持数据的单向有序流转即可,其他数据和视图的状态同步问题 SwiftUI 帮你管理,所以 ViewController
本文中我们将探讨在 SwiftUI 视图中批量获取 Core Data 数据的方式,并尝试创建一个可以使用 mock 数据的 FetchRequest。...SwiftUI 与 Core Data —— 问题[2]SwiftUI 与 Core Data —— 数据定义[3]访问我的博客 www.fatbobman.com[4] 可以获得更好的阅读体验以及最新的更新内容...在 SwiftUI 中,ForEach 会根据数据标识( Identifier )自动处理视图的添加、删除等操作,因此,当在 SwiftUI 中使用 NSFetchedResultsController...DynamicProperty 协议为数据提供了访问 SwiftUI 托管数据池的能力。通过未公开的 _makeProperty 方法,数据可以在 SwiftUI 数据池中申请空间进行保存并读取。...这样可以减少 ForEach 数据集的变化频次,改善 SwiftUI 的视图效率。
欢迎订阅专栏《SwiftUI 2020教程》 我们有一组TextField,如果简单高效的管理他们呢。...本文价值与收获 看完本文后,您将能够作出下面的界面 [image.png] [联动效果] 看完本文您将掌握的技能 管理一组TextField 使用ScrollView 设置圆形TextField 代码...3365059189",":3365059189","法国"] // @State var nation = ["美国",] var body: some View { ScrollView...Text(item) } } } } } 技术交流 QQ:3365059189 SwiftUI...技术交流QQ群:518696470 请关注我的专栏icloudend, SwiftUI教程与源码 https://www.jianshu.com/c/7b3e3b671970
在今后的文章中我们将尝试用新的思路来创建一个 SwiftUI + Core Data 的 app,看看能否避免并改善之前的一些问题。本文将首先探讨如何定义数据。...无需更改代码便可以适应不同的框架( 纯 SwiftUI 驱动、TCA 或其他的 Redux 框架 )所有的视图均可以实现在不使用任何 Core Data 代码的情况下进行预览,并可对 Mock 数据进行动态响应...对于 SwiftUI 来说,托管对象具备两个非常显著的特点:懒加载托管对象的所谓托管是指:该对象被托管上下文所创建并持有。仅在需要的时候,才从数据库( 或行缓存 )中加载所需的数据。...这个类型除了用于为 SwiftUI 的视图提供数据外,同时也会被用于为其他的数据流提供有效信息,例如,在类 Redux 框架中,通过 Action 为 Reducer 提供所需数据。...视图: https://www.fatbobman.com/posts/coreDataInPreview/#为_SwiftUI_预览提供_Core_Data_数据[5] 这点已经在 Ask Apple
最近时常有朋友反映,尽管 SwiftUI 的布局系统学习门槛很低,但当真正面对要求较高的设计需求时,好像又无从下手。SwiftUI 真的具备创建复杂用户界面的能力吗?...不过需要注意的是,NameSpace 只适用于在同一棵视图树中分享数据,如果出现了例如 一段因 @State 注入机制所产生的“灵异代码”[6] 一文中提到了两棵树的情况,则无法实现几何信息的共享。...四、ScrollView 考虑到本文需求的动画形态( 竖向滚动 ),使用 ScrollViewReader 提供的滚动定位功能,同样可以满足需求。...ScrollView 会使用父视图给定的全部建议尺寸创建滚动区域,但在询问其子视图的需求尺寸时只会提供理想尺寸。...scrollDisabled( 则让我们可以在 iOS 16+ 中屏蔽 ScrollView 的滚动手势 )。
最近时常有朋友反映,尽管 SwiftUI 的布局系统学习门槛很低,但当真正面对要求较高的设计需求时,好像又无从下手。SwiftUI 真的具备创建复杂用户界面的能力吗?...不过需要注意的是,NameSpace 只适用于在同一棵视图树中分享数据,如果出现了例如 一段因 @State 注入机制所产生的“灵异代码” 一文中提到了两棵树的情况,则无法实现几何信息的共享。...四、ScrollView 考虑到本文需求的动画形态( 竖向滚动 ),使用 ScrollViewReader 提供的滚动定位功能,同样可以满足需求。...ScrollView 会使用父视图给定的全部建议尺寸创建滚动区域,但在询问其子视图的需求尺寸时只会提供理想尺寸。...scrollDisabled( 则让我们可以在 iOS 16+ 中屏蔽 ScrollView 的滚动手势 )。
每年,SwiftUI 都会通过引入更多功能来赶上 UIKit。今年也不例外。让我们深入了解 SwiftUI 框架引入的新功能。...新的标签栏体验使用新的 Tab 类型,SwiftUI 提供了新的可定制标签栏体验,带有流畅过渡到侧边栏。...滚动位置新的 ScrollPosition 类型与 scrollPosition 视图修饰符配对,允许我们读取 ScrollView 实例的精确位置。我们还可以使用它编程地滚动到滚动内容的特定点。...State private var position: ScrollPosition = .init(point: .zero) var body: some View { ScrollView...总结在 WWDC 24 上,SwiftUI 再次通过引入更多新功能来提升其成熟度,以赶上 UIKit。
urllib.request.urlopen(request) html = response.read().decode("utf-8") return html 一、使用正则、lxml、bs4 解析职位数据...在爬取了整个网页之后,下一步就是从整个 HTML 中提取目标数据。...① 使用 re 模块解析网页数据 根据前面所分析的网页源代码; 查找所有的职位名称。 在 HTML 源代码中,职位名称对应的文本位于标签 中。首先,以 (.*?)... 查找所有的职位详情链接。 职位详情链接的文本位于开始标签 中,且 中有着唯一的属性,可以与其它 进行区分。...> 查找职位类别、招聘人数、地点、发布时间。 职位类别、招聘人数、地点、发布时间对应的文本都位于开始标签 和结束标签 中。 (.*?)
在 SwiftUI 下使用 NSUbiquitousKeyValueStore 同步数据 可以访问我的博客 www.fatbobman.com[1] ,获得更好的阅读体验 NSUbiquitousKeyValueStore...本文将对其用法做以简单介绍,着重探讨如何便捷地在 SwiftUI 中使用 NSUbiquitousKeyValueStore。...•NSUbiquitousKeyValueStore 尚未提供 SwiftUI 下的便捷使用方法 从 iOS 14 开始,苹果为 SwiftUI 提供了 AppStorage,同对待@State 一样,...在 SwiftUI 视图中使用 NSUbiquitousKeyValueStore 本节中,我们将在不使用任何第三方库的情况下,实现 SwiftUI 视图对 NSUbiquitousKeyValueStore...在不使用第三方库的情况下,在 SwiftUI 视图中可以通过桥接@State 数据的形式,将 NSUbiquitousKeyValueStore 的变化同视图联系起来。
领取专属 10元无门槛券
手把手带您无忧上云