标题图 小编 / 达叔小生 查看官方文档：https://developers.weixin.qq.com/miniprogram/dev/component/ 小程序开发基础-scroll-view 可滚动视图区域...，是因为滚动视图可以横向滚动和纵向滚动，bindscrolltoupper="upper"定义绑定事件，在逻辑代码中编写，滚动到顶部，触发scrolltoupper事件。...（id不能以数字开头），设置哪个方向可滚动，则在哪个方向滚动到该元素 scroll-with-animation 表示在设置滚动条位置时使用动画过渡 bindscrolltoupper 表示滚动到顶部或左边...设置哪个方向可滚动，则在哪个方向滚动到该元素，可知道要id，所以在index.wxml中有了</view...png 开源github分享 Wechat_small_program_Share 微信小程序分享 Github 欢迎 Star、Fork 结语 本文主要讲解 小程序开发基础-scroll-view 可滚动视图区域
看到渣浪的查看文章或者查看大图有个效果：弹窗查看内容时，如果内容过长有滚动条，则滚动条会被放到body区滚动 什么意思呢？...看个图片，一般正常弹窗是有宽高限制的，如果内容过长则直接在弹窗中进行滚动 点我预览 ?...将滚动位置放到整个body中，让弹窗中内容自适应高度 这么做的好处自然很明显，body区域有更大的可视区域，来看看最后的效果 点我预览 ?...fixed之后，弹窗的最大高度为视窗高度，若要使得弹窗的内容区直接显示出来，就必须设置为非fixed值，而弹窗不能少了定位，那就只能使用 absolute值了 但设置了absolute就无法计算页面有滚动条的时候的位置...layer-scroll-in-body') &.layer-scroll-in-body { position: absolute; height: auto; } 在页面有滚动条的时候
, for placement: ContentMarginPlacement = .automatic) -> some View 为可滚动容器的内容或滚动指示器（Scroll Indicator）...可采用 优化在 SwiftUI List 中显示大数据集的响应效率[5] 一文中介绍的方式来解决。 scrollPostion(id:) 使用此修饰符可以让滚动视图滚动到特定的位置。....automatic 是默认行为，在紧凑的水平尺寸类中受限，否则不受限。 .always 始终限制可滚动视图的数量。 .never 不限制可滚动视图的数量。...当子视图滑入和滑出包含它的滚动视图的可视区域时，scrollTransition 会对该视图应用给定的过渡动画，并在不同阶段之间平滑地过渡。...目前定义了三种阶段状态（Phase）： topLeading: 视图滑入滚动容器的可见区域 identity: 表示视图目前在可见区域中 bottomTrailing: 视图滑出滚动容器的可见区域 scrollTransition
因此，如果你正在创建一个视图来显示可滚动的内容，并可能进行选择操作，那么在 iOS 和 macOS 上使用 List 将有最好的体验。...阅读 The SwiftUI Layout Protocol [11]了解如何创建自定义布局。创建从底部开始的滚动视图Q：我如何实现一个在底部对齐的滚动视图，在 macOS 上会不会有糟糕的性能？...A：你最好的选择是使用 ScrollView 和 ScrollViewReader，并在 onAppear 或新内容进来时滚动到最底部的视图。我不建议尝试旋转滚动视图。...将背景扩展到安全区域Q：如果我有一个自定义的容器类型，可以接受一个顶部和底部的视图，是否有办法让 API 的调用者将所提供的视图的背景扩展到安全区域内，同时将内容（ 如文本或按钮 ）保留在安全区域内？...然后让顶部/底部视图忽略安全区域。我不确定这是否能满足你的用例，但值得一试。在 background 修饰器中，可以通过 ignoresSafeAreaEdges 参数设置是否忽略安全区域。
大幅改善了 ScrollView 的控制力 本次升级中，为 ScrollView 带来了新的动态滚动定位系统（ 不依赖 ScrollViewReader 和显式的 id 声明）、一次性的定位系统（ 在视图进入后...，直接定位到滚动视图的特定位置，只能使用一次 ）、全新的滚动条控制（ 闪烁 ）、可自定义行视图在滚动区域的顶端和显示区域的显示状态（ 例如可用其实现类似 watchOS 中的滚动到顶端子视图缩小的视觉效果...）、支持分页滚动（ 开发者长期盼望的 ）、自定义滚动内容的缩进、为滚动内容（非滚动容器）添加安全区域等众多功能。...其他功能 本次的升级内容非常多，导致苹果给出的 更新文档 中，很多的新功能也没有列出。在接下来的一段时间中，互联网上应该会有不少的文章对这些功能进行进一步的说明和讲解。...在不考虑兼容旧版本的情况下，我认为 SwiftUI 5.0 的升级可以打 95 分（满分 100 分），不过考虑到很多的开发者在相当一段时间内还无法使用这些新功能，心情就会异常的低落。
本文将聊聊我对本届 WWDC 中 SwiftUI 5.0 和 SwiftData 的初步印象。 访问我的博客 www.fatbobman.com[1] 可以获得更好的阅读体验以及最新的更新内容。...大幅改善了 ScrollView 的控制力 本次升级中，为 ScrollView 带来了新的动态滚动定位系统（ 不依赖 ScrollViewReader 和显式的 id 声明）、一次性的定位系统（ 在视图进入后...，直接定位到滚动视图的特定位置，只能使用一次 ）、全新的滚动条控制（ 闪烁 ）、可自定义行视图在滚动区域的顶端和显示区域的显示状态（ 例如可用其实现类似 watchOS 中的滚动到顶端子视图缩小的视觉效果...）、支持分页滚动（ 开发者长期盼望的 ）、自定义滚动内容的缩进、为滚动内容（非滚动容器）添加安全区域等众多功能。...其他功能 本次的升级内容非常多，导致苹果给出的 更新文档[3] 中，很多的新功能也没有列出。在接下来的一段时间中，互联网上应该会有不少的文章对这些功能进行进一步的说明和讲解。
欢迎大家在 Discord 频道[2] 中进行更多地交流判断一个可滚动控件（ ScrollView、List ）是否处于滚动状态在某些场景下具有重要的作用。...比如在 SwipeCell[3] 中，需要在可滚动组件开始滚动时，自动关闭已经打开的侧滑菜单。遗憾的是，SwiftUI 并没有提供这方面的 API 。...(_ scrollView: UIScrollView)手指滑动可滚动区域后（ 此时手指已经离开 ），滚动逐渐减速，在滚动停止时会调用此方法scrollViewDidEndDragging(_ scrollView...：PreferenceKey在 SwiftUI 中，子视图可以通过 preference 视图修饰器向其祖先视图传递信息（ PreferenceKey ）。...判断的准确度没有前两种方式高当可滚动组件中的内容出现了非滚动引起的尺寸或位置的变化（ 例如 List 中某个视图的尺寸发生了动态变化 ），本方式会误判断为发生了滚动，但在视图的变化结束后，状态会马上恢复到滚动结束滚动开始后
尽管 SwiftUI 的惰性容器以及 Core Data 都有各自的内存占用优化机制，但随着应用视图内容的复杂（ 图文混排 ），越来越多的开发者遇到了内存占用巨大甚至由此导致 App 崩溃的情况。...SwiftUI 的惰性视图容器拥有对符合 DynamicViewContent 协议的内容（ 通过 ForEach 生成的内容 ）进行优化的能力。...当子视图进入惰性容器的可视区域时，SwiftUI 会调用它的 onAppear 闭包，子视图退出可视区域时，会调用 onDisappear 闭包。...尽管从表面上来看，惰性容器仅会在视图进入可视区域时才会对其进行操作，但一旦该视图被显示过（ body 被求过值 ），即使该视图离开可视区域，SwiftUI 仍会保存视图的 body 值。...在本例中，子视图的 body 值中一定会包含用于显示的图片数据，因此，即使该视图已经被显示过（ 滚动出显示区域 ），该视图的 body 值仍将占用不小的内存。
记录下来以防忘记 需求：图中圈中的部门是滚动的。
，并可通过按钮在搜索结果中进行滚动切换？...请阅读 优化在 SwiftUI List 中显示大数据集的响应效率[6] 以及 避免 SwiftUI 视图的重复计算[7] 两篇文章，了解更多有关性能优化方面的内容通过 currentPostion 获取需要滚动到的...了解更多内容，请阅读 SwiftUI 视图的生命周期研究[9] 一文优先定位于最靠近屏幕中央的搜索结果：/// 从 List 当前显示中的 transcription 中就近选择 match 的 positionprivate...SwiftUI 视图中打开 URL 的若干方法[10] 一文，了解更多有关 OpenURLAction 的内容创建体验感优秀的搜索条使用 safeAreaInset 添加搜索栏在没有 safeAreaInset.../posts/swiftUILifeCycle/[10] 在 SwiftUI 视图中打开 URL 的若干方法: https://www.fatbobman.com/posts/open_url_in_swiftUI
在之前的 SwiftUI 框架版本中，应该使用 @ObservedObject 属性包装器来订阅更改。现在不需要了，因为 SwiftUI 视图会自动跟踪符合 Observable 协议的类型的更改。...每当用户滚动视图时，它会通过设置第一个可见视图的标识来更新绑定。...还可以通过编程方式滚动到任何视图，但是，应该使用 scrollTargetLayout 视图修饰符来告诉 SwiftUI 框架在哪里查找标识以更新绑定。...它允许在滚动视图中启用分页。 搜索 与搜索相关的视图修饰符也有一些很好的新增功能。例如，可以通过编程方式聚焦到搜索字段。...Swift Charts 也具有可滚动和可动画的功能。
本文将通过一个优化列表视图的案例，展现在 SwiftUI 中查找问题、解决问题的思路，其中也会对 SwiftUI 视图的显式标识、@FetchRequest 的动态设置、List 的运作机制等内容有所涉及...在 SwiftUI 视图的生命周期研究[3] 一文中，我对 List 如何对子视图的显示进行优化做了一定的介绍。...在 SwiftUI 应用代码中，绝大多数的视图标识都是通过结构性标识 （有关结构性标识的内容可以参阅 ViewBuilder 研究（下） —— 从模仿中学习[4]）来实现的 —— 通过视图层次结构（视图树...在 SwiftUI 中为视图设置显式标识目前有两种方式： 在 ForEach 的构造方法中指定 由于 ForEach 中的视图数量是动态的且是在运行时生成的，因此需要在 ForEach 的构造方法中指定可用来标识子视图的...但一旦为这些子视图添加了 id 修饰符，这些视图将无法享受到 List 提供的优化能力 （ List 只会对 ForEach 中的内容进行优化）。
有关这方面的内容，请参阅 SwiftUI 布局 —— 尺寸（ 下 ）[4] 一文中“面子和里子”章节。...有关建议尺寸、需求尺寸等内容，请参阅 SwiftUI 布局 —— 尺寸（ 上 ）[5] 一文 三、NameSpace 从 3.0 版本（ iOS 15 ）开始，SwiftUI 提供了新的 NameSpace...ScrollView 会使用父视图给定的全部建议尺寸创建滚动区域，但在询问其子视图的需求尺寸时只会提供理想尺寸。...scrollDisabled（ 则让我们可以在 iOS 16+ 中屏蔽 ScrollView 的滚动手势 ）。...有关转场动画的更多内容，请参阅 SwiftUI 的动画机制[8] 一文 八、Layout 协议 在 4.0 版本中，SwiftUI 增加了 Layout 协议，通过该协议，开发者可以针对特定的场景，创建自定义布局容器
有关这方面的内容，请参阅 SwiftUI 布局 —— 尺寸（ 下 ） 一文中“面子和里子”章节。...有关建议尺寸、需求尺寸等内容，请参阅 SwiftUI 布局 —— 尺寸（ 上 ） 一文 三、NameSpace 从 3.0 版本（ iOS 15 ）开始，SwiftUI 提供了新的 NameSpace...ScrollView 会使用父视图给定的全部建议尺寸创建滚动区域，但在询问其子视图的需求尺寸时只会提供理想尺寸。...七、Transition 通过为视图设定 Transition（ 转场 ），在视图插入或将其移出视图树时，SwiftUI 将自动生成对应的动画效果。...有关转场动画的更多内容，请参阅 SwiftUI 的动画机制 一文 八、Layout 协议 在 4.0 版本中，SwiftUI 增加了 Layout 协议，通过该协议，开发者可以针对特定的场景，创建自定义布局容器
SwiftUI 的使用例子中就是这样写的，当然我们在正常的使用中这样写也没啥问题，那我们界面跳转的问题是什么呢？...GeometryReader 的主要作用就是能够获取到父View建议的尺寸，这就是它的主要作用，要没有它我们面临的可能就是无休止的传值了，SwiftUI 既然是声明式的UI,按我的理解你就没有办法去获取某一个视图的父视图之类的...有一个还得说明一下，GeometryReader 改变了它显示内容的方式。在 iOS 13.5 中，内容放置方式为 .center。在 iOS 14.0 中则为：.topLeading。...3、再提一点关于上面说的滚动视图，在UIKit中我们可以用UICollectionView搞定一切，但是在SwiftUI中没有这个控件，我建议采用的方式是 ScrollView + HStack + VStack...在 iOS 13.5 中，内容放置方式为 .center。
什么是视图 开发者更习惯将符合 View 协议的结构体或结构体实例视作视图，而在 SwiftUI 的角度，视图值树上的节点内容，才是它所认为的视图。...通常情况下，SwiftUI 在需要渲染屏幕某个区域或需要该区域的数据配合布局时，会在视图值树上创建对应的视图。当不再需要其参与布局或渲染时视图将被销毁。...比如在 List 和 LazyVStack 中，Cell 视图在创建之后即使滚动出屏幕不参与布局与渲染，但 SwiftUI 仍会保留这些视图的数据，直到 List 或 LazyVStack 被销毁。...•ScrollView + VStack 中，即使 Cell 视图没有出现在可见区域，但它在最开始就会参与容器的布局，因此会在创建初始便触发 onAppear，但无论如何滚动，所有的 Cell 视图始终会参与布局...开发者即使不了解文本上述的内容，也可以让 SwiftUI 的代码在日常中发挥出不错的效率。但如果能够对视图的生命周期有更深入的了解，将可以帮助开发者在一些特定的场合提高代码的执行效率。
SwiftUI案例：3D旋转图片播放器 效果 目标 实现多张图片的3D切换查看功能 外观配置 任选 7 张任意尺寸的图片按 p1 至 p7 进行命名并拖拽进 Assets.xcassets 文件中（如图所示...） 创建View视图 在工作区的项目文件夹下创建名为 View 的 Group 并在其中依次创建 Home.swift CarouseBodyView.swift ScrollViewOffsetModifier.swift...： 滚动偏量视图，用来设置3D滚动效果； 视图的实现 主视图 Home.swift 大致定义整个屏幕视图的布局与容器接口。...CarouseBodyView.swift 通过视图容器的嵌套布局，实现 Home.swift 中组件的文本与图片的具体内容。...CarouseBodyView_Previews: PreviewProvider { static var previews: some View { ContentView() } } 滚动偏量视图
众所周知，SwiftUI 是一个响应式框架，这意味着，当数据源发生变化时，框架会自动更新视图。同样，当我们想调整视图显示时，应直接对状态进行修改。...这两个错误包括：通过手势取消 Sheet 后，快速右滑导航容器导致应用锁死；以及在滚动中返回上层视图时导致应用崩溃。...原文发表在我的博客 肘子的Swift记事本视图变化在前、状态变化在后在 SwiftUI 中，某些可编程控件在执行一定的操作时，会先更新视图，待视图变化完成后再修改与其对应的状态。...当视图正在滚动时返回上一层视图会导致应用崩溃这是一个由 xiaogd 在我的 Discord 论坛中提出的 问题。...请至少进入第三级视图滚动当前视图当视图处于滚动状态时，点击 NavigationStack 左上角的 “Back” 按钮。
众所周知，SwiftUI 是一个响应式框架，这意味着，当数据源发生变化时，框架会自动更新视图。同样，当我们想调整视图显示时，应直接对状态进行修改。...这两个错误包括：通过手势取消 Sheet 后，快速右滑导航容器导致应用锁死；以及在滚动中返回上层视图时导致应用崩溃。...视图变化在前、状态变化在后 在 SwiftUI 中，某些可编程控件在执行一定的操作时，会先更新视图，待视图变化完成后再修改与其对应的状态。这些控件基本上都是对 UIkit（AppKit）的二次包装。...当视图正在滚动时返回上一层视图会导致应用崩溃 这是一个由 xiaogd 在我的 Discord 论坛中提出的 问题[3]。...请至少进入第三级视图 滚动当前视图 当视图处于滚动状态时，点击 NavigationStack 左上角的 “Back” 按钮。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
