在 SwiftUI 5.0 中,苹果大幅强化了 ScrollView 功能。新增了大量新颖、完善的 API。本文将对这些新功能进行介绍,希望能够让它们更多、更早的帮助到有需要的开发者。...不限于 ScrollView,支持所有可滚动容器(包括 List、TextEditor 等)。 将可滚动容器内的所有子视图视为一个整体,并为其添加 margin。...使用 scrollIndicatorsFlash(trigger:) 可以在提供的值更改时,修饰符作用域范围内的所有可滚动容器的滚动指示器短暂闪烁。...可采用 优化在 SwiftUI List 中显示大数据集的响应效率[5] 一文中介绍的方式来解决。 scrollPostion(id:) 使用此修饰符可以让滚动视图滚动到特定的位置。...滚动停止时,容器顶端将与子视图的顶部对齐(在垂直模式下)。开发者可以通过控制 scrollTargetLayout 的启用与否来开关 viewAligned 的行为。
值得注意的是,所有新机型在横屏模式下新增了 20 pt 的顶部安全区内边距。...SwiftUI TextEditor 富文本编辑 (Using Rich Text in the TextEditor with SwiftUI)[17] 在 WWDC 2025 中,苹果为 TextEditor...带来了期待已久的富文本支持,让开发者可以直接使用 AttributedString 在 SwiftUI 中编写和编辑样式化文本。...TextEditor 的富文本能力高度依赖于 Foundation 层面对 AttributedString 的重大增强。...TextEditor 富文本编辑 (Using Rich Text in the TextEditor with SwiftUI): https://l.fatbobman.com/w0107-07
每年,SwiftUI 都会通过引入更多功能来赶上 UIKit。今年也不例外。让我们深入了解 SwiftUI 框架引入的新功能。...NavigationStack 内从一个视图导航到另一个视图时,使用相同的标识符和命名空间创建平滑的过渡。...滚动位置新的 ScrollPosition 类型与 scrollPosition 视图修饰符配对,允许我们读取 ScrollView 实例的精确位置。我们还可以使用它编程地滚动到滚动内容的特定点。...框架的下一版本包括许多新 API,如窗口推送、TextField 和 TextEditor 视图中的文本选择观察、搜索焦点监控、自定义文本渲染、新的 MeshGradient 类型等等,我无法在一篇文章中涵盖所有内容...SwiftUI还引入了许多新的API,如窗口推送、文本选择观察、搜索焦点监控等,使开发更加便捷和强大。
正在测试的列表具有不同类型的数据(例如图像、视频、GIF、文本等)。在测试不同实现时执行相同的操作(例如,在内容上滚动三次)。数据以每页 25 个项目的形式获取。...在加载消息时进行任何后续滚动,不会影响性能。在此测试期间,FPS 值的平均值约为每秒 59 帧。滚动是流畅且响应迅速的。有 AnyView接下来,让我们做同样的测试,同时使用 AnyView 包装器。...此测试中的平均 FPS 约为每秒 55 帧,你可能会注意到在滚动时出现一些可见的故障,尽管情况并不那么糟糕。...没有 AnyView在没有 AnyView 包装器的情况下进行测试产生了与常规滚动测试相似的结果(58-59 FPS)。这也是预期的,因为 SwiftUI 知道视图的标识和结构。...总结总而言之,在这些情景中(包含异构视图的可滚动列表),最好为容器中的不同视图使用具体类型。这可能听起来更复杂一些,但实际上你可以使其更简单,而不必过多地处理泛型。
SwiftUI 4.0 的 Form 在 Ventura 上的表现与以往版本有很大的不同。形式上更接近 iOS 的状态,同时也对 mac 进行了更多的适配。...阅读 The SwiftUI Layout Protocol [11]了解如何创建自定义布局。创建从底部开始的滚动视图Q:我如何实现一个在底部对齐的滚动视图,在 macOS 上会不会有糟糕的性能?...在两种方案中,如果在数据量很大的情况下,我更倾向于第一种方式,这样可以按需求读取数据。...将背景扩展到安全区域Q:如果我有一个自定义的容器类型,可以接受一个顶部和底部的视图,是否有办法让 API 的调用者将所提供的视图的背景扩展到安全区域内,同时将内容( 如文本或按钮 )保留在安全区域内?...在 SwiftUI 中,有一个从第一版开始就存在但尚未公开的纯 SwiftUI 实现的滚动容器 —— _ScrollView 。
近期推荐 理解终端输出中的颜色与样式 (Understanding Colors and Styles in Terminal Output)[5] Natan Rolnik[6] 在构建终端工具时,能够灵活调整输出文本的样式不仅能增强工具的视觉体验...Natan Rolnik 在本文中通过详细解析 ANSI 转义码(ANSI Escape Codes),介绍了如何通过这些转义码修改终端文本的前景色、背景色及样式(如粗体、下划线等)。...在本文中,Pol Piella Abadia 介绍了如何借助两种不同的实现方法将绑定值传递给 SwiftUI 视图。...为可滚动视图内容添加内边距 (Insetting Scrollable Views’ Content With contentMargins In SwiftUI)[16] Gabriel Theodoropoulos...[17] 从 iOS 17 开始,开发者可以使用 contentMargins 修饰符在可滚动视图(如 ScrollView、List 和 TextEditor)的内容周围灵活设置内边距,优化布局效果。
难点主要集中在适配方面。 macOS:今年除了提升 macOS 下列表和滚动容器的性能外,还进一步增强了 SwiftUI 和 AppKit 之间的协作。...从某种程度上来说,SwiftUI 开发团队也采取了更加务实的态度,承认了在相当长一段时间里,SwiftUI 需要与 UIKit/AppKit 协同工作才能为用户提供更完整的体验。...富文本编辑器:这是开发者长期渴望的功能,从最终的完成效果来看,至少我感到很惊艳。其主要工作量可能并非来自 TextEditor本身,而是对 AttributedString的大幅增强。...有些遗憾的是,我测试了从去年到今年遇到的一些必现 SwiftUI Bug,在 beta1 版本中并没有得到解决。我认为解决稳定性、提升性能仍是未来相当长一段时间里 SwiftUI 的首要目标。...这个功能不仅让开发者可以更加灵活、低成本地学习和测试 API,而且也让库开发者可以将更多有效的演示集成到源码中。
" page.add(TextEditor())ft.app(main)自定义的 TextEditor 组件封装了输入框的创建、内容的加载和保存等功能,让主函数的代码更简洁。...自定义组件:创建 TextEditor 类,封装输入框的相关功能,包括加载内容、保存内容、监听内容变化等。主函数:创建页面,添加自定义的 TextEditor 组件,并启动应用。...输入框无法滚动可能的原因:没有将 scrollable 属性设为 True。解决方法:在创建 TextField 时,设置 scrollable=True。2....在这个文本编辑器中,如何实现数据持久化的?在这个文本编辑器中,我们通过文件读写来实现数据持久化。具体来说,就是实时监听输入框的内容变化,每当内容发生变化时,就将内容写入到指定的文件中。...在这个文本编辑器中,将输入框的加载内容、保存内容、监听变化等功能封装到 TextEditor 组件中,让主函数的代码更简洁,也方便后续对该组件进行修改和扩展。4. 如何处理文件不存在的情况?
介绍 ScrollView 即滚动视图,在 iOS 开发中扮演着非常重要的角色。...SwiftUI 1.0 可以垂直与水平滚动。...import SwiftUI struct ContentView: View { var body: some View { // 参数1:滚动方向,参数2:是否显示滚动条...,参数3:滚动内容 ScrollView(.vertical, showsIndicators: false) { Text("SwiftUI").padding...可以控制滚动时键盘的隐藏方式。 可以控制滚动条的显隐。
文本输入性能得到优化,打字延迟率大大降低。 内容加载性能得到大幅优化,加载工作区快了 40 %。...当数据发生更改时,视图可以自动更新,而无需手动调用setNeedsLayout()、setNeedsDisplay()等方法。...该功能可以支持到 iOS 18,但需要在 Info.plist 文件中增加字段UIObservationTrackingEnabled,并且将其值设置为YES。...UIImage 使用 SF Symbols 7 可以实现更流畅、更实用的 UI 动画。...通过引入 UIHonstingSceneDelegate,UIKit 可以启动 SwiftUI 场景,包括 visionOS 上的沉浸式体验。同时也可以通过编程的方式打开 SwiftUI 场景。
介绍ScrollView 即滚动视图,在 iOS 开发中扮演着非常重要的角色。...但在 SwiftUI 的发展史上,ScrollView 一直处于“残废”的状态,直到 SwiftUI 6.0 才逐渐补齐短板。下面详细讲解 SwiftUI 中 ScrollView 的进化史。...SwiftUI 1.0可以垂直与水平滚动。...:滚动内容 ScrollView(.vertical, showsIndicators: false) { Text("SwiftUI").padding(20)...可以控制滚动时键盘的隐藏方式。可以控制滚动条的显隐。
系列文章 如何在 SwiftUI 中创建条形图 SwiftUI 中的水平条形图 在 iOS 16 中用 SwiftUI Charts 创建一个折线图 在 iOS16 中用 SwiftUI 图表定制一个线图...条形图上的值使用叠加视图修改移到了条形图的顶部。这个值是偏移的,所以文本不会离条形图的顶部太近。数据名称的字体大小和字重也可以被设置。...文本视图的宽度被限制在条形图宽度的范围内,而且条形图的标签文本会被截断,条形图的文本视图也被限制在条形宽度的范围内,并且文本可以被隐藏起来。...图标被设置为固定大小,视图被嵌入到 ScrollView 中,以便在设备旋转时滚动。...SwiftUI 是一个很好的平台,用于创建视图和快速重构独立的子视图。在 SwiftUI 中构建条形图需要做一些工作,随着使用数据来试用条形图,可以确定更多的定制化。
- 使用 `@ObservedObject` 在多个视图中共享状态。### 3. 构建复杂用户界面掌握 SwiftUI 的基本概念后,可以开始构建更复杂的用户界面和功能。...- `padding(.top, 100)` 设置了 `VStack` 的顶部内边距为 100,以在视图顶部留出一些空间。### 5....SwiftUI怎么置顶显示?在 SwiftUI 中,如果你希望将某个视图置顶显示(即固定在视图的顶部),有几种常见的方式。以下是几种方法的解释和示例:### 1....通过在 `VStack` 中使用 `Spacer()`,可以将视图推到顶部。...,而其他内容可以滚动查看。
条演示数据后,该视图的响应状况如下: id_delay_demo_2022-04-23 12.22.44.2022-04-23 12_29_07 进入视图的时候有明显的卡顿(1 秒多钟),进入后列表滚动流畅且可无延迟的响应滚动到列表底部或顶部的指令...考虑到当前的卡顿出现在进入视图的时刻,我们可以将查找问题的关注点集中在如下几个方面: Core Data 的性能( IO 或 惰值填充 ) 列表视图的初始化或 body 求值 List 的效能 Core...虽然我们已经找到了导致进入列表视图卡顿的原因,但如何在不影响效率的情况下通过 scrollTo 来实现到列表端点的滚动呢?...新的问题 细心的朋友应该可以注意到,运行解决方案一的代码后,在第一次点击 bottom 按钮时,大概率会出现延迟情况(并不会立即开始滚动)。...解决方案二 在认识到 ScrollViewProxy 以及在 ForEach 中使用 id 修饰符两者的异常表现后,我们只能尝试通过调用底层的方式来获得更加完美的效果。
前言 WWDC 23 已经到来,SwiftUI 框架中有很多改变和新增的功能。在本文中将主要介绍 SwiftUI 中数据流、动画、ScrollView、搜索、新手势等功能的新变化。...在之前的 SwiftUI 框架版本中,应该使用 @ObservedObject 属性包装器来订阅更改。现在不需要了,因为 SwiftUI 视图会自动跟踪符合 Observable 协议的类型的更改。...动画 动画始终是 SwiftUI 框架中最重要的部分。在 SwiftUI 中轻松实现任何动画,但之前的框架版本缺少一些现在具有的功能。...还可以通过编程方式滚动到任何视图,但是,应该使用 scrollTargetLayout 视图修饰符来告诉 SwiftUI 框架在哪里查找标识以更新绑定。...它允许在滚动视图中启用分页。 搜索 与搜索相关的视图修饰符也有一些很好的新增功能。例如,可以通过编程方式聚焦到搜索字段。
SwiftUI案例:3D旋转图片播放器 效果 目标 实现多张图片的3D切换查看功能 外观配置 任选 7 张任意尺寸的图片按 p1 至 p7 进行命名并拖拽进 Assets.xcassets 文件中(如图所示...) 创建View视图 在工作区的项目文件夹下创建名为 View 的 Group 并在其中依次创建 Home.swift CarouseBodyView.swift ScrollViewOffsetModifier.swift...,用来设置3D滚动效果; 视图的实现 主视图 Home.swift 大致定义整个屏幕视图的布局与容器接口。...previews: some View { Home() } } 控件视图 CarouseBodyView.swift 通过视图容器的嵌套布局,实现 Home.swift 中组件的文本与图片的具体内容...import SwiftUI struct ScrollViewOffsetModifier: ViewModifier { //定义顶部锚点 var anchorPoint: Anchor
当涉及到水平和垂直的变体时( HStack 和 VStack ),我们需要在这两者之间动态的切换。...在我们的例子中,LoginActionsView 不再只是水平方向的排列,它现在也能移动到屏幕的顶部。...使用布局协议 虽然我们最后已经用了非常棒的解决方案,可以在所有支持 SwiftUI 的 iOS 版本中使用,但也让我们来探索一下在 iOS 16 中引入的一些新的布局工具(在写这篇文章时,它作为...Xcode 14 的一部分仍在测试阶段) 其中一个工具是新的 Layout 协议,它既能让我们创建完整的自定义布局,直接集成到 SwiftUI 的布局系统中,同时也提供给我们一种更丝滑更动画的方式在各种布局之间动态切换...这样做会令动画更流畅,例如在切换设备方向时,我们也有可能在执行此类更改时获得小幅的性能提升(因为 SwiftUI 总是在其视图层次结构为静态时尽可能表现最佳) 选择合适的视图 但我们还没有结束,因为
SwiftUI的@State属性包装器允许我们自由修改视图结构体,这意味着当程序更改时,我们可以更新视图属性以匹配。 但是,使用UI控件时,事情会更复杂一些。...但是,该代码不会编译,因为SwiftUI想知道文本字段中的文本存储位置。 请记住,视图是其状态的函数——文本输入框只能在反映存储在程序中的值时显示某些内容。...SwiftUI需要的是结构中的一个字符串属性,它可以显示在文本输入框中,还将存储用户在文本输入框中键入的任何内容。...这告诉Swift,它应该读取属性的值,但也应该在发生任何更改时将其写回。...在继续之前,让我们修改文本视图,使其在文本字段的正下方显示用户名: Text("Your name is \(name)") 注意它是如何使用name而不是$name?
1.jpg 假设您有一个具有文本编辑器组件的应用程序,并且您想要提供拼写检查。...() { spellChecker = new SpellChecker(); } } 我们在这里所做的是,在 TextEditor 和 SpellChecker 之间创建一个依赖项。...在控制反转的情况下,我们会做这样的事情 - public class TextEditor { private SpellChecker spellChecker; public TextEditor...在这里,我们从 TextEditor 中删除了完全控制权并将其保留在其他地方(即 XML 配置文件),并且依赖项(即类 SpellChecker)通过Class Constructor注入到类 TextEditor...使用 DI 原则,代码更清晰,当对象提供依赖项时,解耦更有效。该对象不查找其依赖项,也不知道依赖项的位置或类,而是由 Spring 框架处理所有事情。