欢迎大家在 Discord 频道[2] 中进行更多地交流将某个视图在父视图中居中显示是一个常见的需求，即使对于 SwiftUI 的初学者来说这也并非难事。...在 SwiftUI 中，有很多手段可以达成此目的。本文将介绍其中的一些方法，并对每种方法背后的实现原理、适用场景以及注意事项做以说明。...().fill(.clear)在使用 SwiftUI 进行开发的过程中，Color、Rectangle 等经常被用来实现对容器的等分操作。...我为本文这种通过多种方法来解决一个问题的方式添加了【小题大作】标签，目前使用该便签的文章还有：在 Core Data 中查询和使用 count 的若干方法[6]、在 SwiftUI 视图中打开 URL.../[7] 在 SwiftUI 视图中打开 URL 的若干方法: https://www.fatbobman.com/posts/open_url_in_swiftUI/[8] Twitter: https
在非滚动方向上，ScrollView 会向子视图提供该维度上的全部可用尺寸。而在滚动方向上，它向子视图提供的建议尺寸为 nil。...用 SwiftUI 的方式进行布局 由于对 GeometryReader 的负面看法，一些开发者会尝试寻找其他方式以避免使用它。...请阅读 用 SwiftUI 的方式进行布局[9] 和 在 SwiftUI 中实现视图居中的若干种方法[10] 两篇文章，以了解面对同一个需求，SwiftUI 有多种布局手段。...里子和面子：不同的尺寸数据 在 SwiftUI 中，有一些 modifier 是在布局之后，在渲染层面对视图进行的调整。...在 SwiftUI 布局 —— 尺寸（ 下 ）[11] 一文中，我们探讨过有关尺寸的“里子和面子”的问题。
本文将介绍几种在 SwiftUI 中获取当前滚动状态的方法，每种方法都有各自的优势和局限性。...: UIScrollView, willDecelerate decelerate: Bool)手指拖动结束后（ 手指离开时 ），调用此方法在 SwiftUI 中，很多的视图控件是对 UIKit（ AppKit...模式，因此无法有效地区分滚动是由那个控件造成的方法三：PreferenceKey在 SwiftUI 中，子视图可以通过 preference 视图修饰器向其祖先视图传递信息（ PreferenceKey...preference 与 onChange 的调用时机非常类似，只有在值发生改变后才会传递数据。在 ScrollView、List 发生滚动时，它们内部的子视图的位置也将发生改变。...（ 状态已变化为滚动中 ），保持手指处于按压状态并停止滑动，此方式会将此时视为滚动结束，而前两种方式仍会保持滚动中的状态直到手指结束按压IsScrolling我将后两种解决方案打包做成了一个库 —— IsScrolling
在 SwiftUI 5.0 中，苹果大幅强化了 ScrollView 功能。新增了大量新颖、完善的 API。本文将对这些新功能进行介绍，希望能够让它们更多、更早的帮助到有需要的开发者。...可采用 优化在 SwiftUI List 中显示大数据集的响应效率[5] 一文中介绍的方式来解决。 scrollPostion(id:) 使用此修饰符可以让滚动视图滚动到特定的位置。...（视图标识） 不支持锚点设定，固定锚点为子视图的 center 正如 优化在 SwiftUI List 中显示大数据集的响应效率[6] 一文所提到的，当数据集很大时，也会出现性能问题。...总结 我完全没有想到，在 SwiftUI 5 中，苹果对 ScrollView 进行了全面增强。值得赞赏的是，他们不仅提供了一些一直期待的功能，而且在 API 的设计和实现完成度上都非常出色。...就我个人而言，在 SwiftUI 5 中，ScrollView 的原生方案已经能够满足大多数需求，因此我们将看到更多人采用 ScrollView + LazyStack 的组合方式。
自定义布局Q：我经常想根据列表中最长或最短的文字来布置各种小组件。鉴于动态文本大小在应用程序运行时可能会发生变化，衡量给定字体的文本大小的最佳方法是什么？A：你好！我们新的布局协议支持这个功能。...任何自定义布局的完整实现都比我在这里的帖子中快速勾勒出来的要长，但总体思路是，你可以创建一个布局来查询其子级的理想大小并相应地对它们进行排序。...我采用了常见的解决方案，即旋转滚动视图和里面的每个单元格，以获得预期的倒置列表，在 iOS 上，这很有效。但在 macOS 上，它使 CPU 使用率保持在 100%。...A：你最好的选择是使用 ScrollView 和 ScrollViewReader，并在 onAppear 或新内容进来时滚动到最底部的视图。我不建议尝试旋转滚动视图。...在 SwiftUI 中，有一个从第一版开始就存在但尚未公开的纯 SwiftUI 实现的滚动容器 —— _ScrollView 。
大幅改善了 ScrollView 的控制力 本次升级中，为 ScrollView 带来了新的动态滚动定位系统（ 不依赖 ScrollViewReader 和显式的 id 声明）、一次性的定位系统（ 在视图进入后...，直接定位到滚动视图的特定位置，只能使用一次 ）、全新的滚动条控制（ 闪烁 ）、可自定义行视图在滚动区域的顶端和显示区域的显示状态（ 例如可用其实现类似 watchOS 中的滚动到顶端子视图缩小的视觉效果...这是我目前整理的一些有关 SwiftData 的问题和注意事项（ 原文发表在推文中，没有进行更系统的归纳）： 尚不支持公共和共享数据的云同步 在当前版本中，通过其他上下文（ModelContext）创建的数据并不会自动合并到视图上下文中...com.apple.CoreData.ConcurrencyDebug 1 后，即使在新的 Context 中使用 transaction 尝试保持线程一致，仍会强制报错（即使是在一个新创建的 actor...开心还是无奈 在今年的 WWDC 中，苹果为 SwiftUI 带来了非常大的变革，并推出了开发者向往已久的 SwiftData。
前言 WWDC 23 已经到来，SwiftUI 框架中有很多改变和新增的功能。在本文中将主要介绍 SwiftUI 中数据流、动画、ScrollView、搜索、新手势等功能的新变化。...在之前的 SwiftUI 框架版本中，应该使用 @ObservedObject 属性包装器来订阅更改。现在不需要了，因为 SwiftUI 视图会自动跟踪符合 Observable 协议的类型的更改。...动画 动画始终是 SwiftUI 框架中最重要的部分。在 SwiftUI 中轻松实现任何动画，但之前的框架版本缺少一些现在具有的功能。...还有 KeyframeAnimator 视图，可以使用关键帧来实现动画。 ScrollView 今年 ScrollView 有了很多优秀的新增功能。...它允许在滚动视图中启用分页。 搜索 与搜索相关的视图修饰符也有一些很好的新增功能。例如，可以通过编程方式聚焦到搜索字段。
系列文章 如何在 SwiftUI 中创建条形图 SwiftUI 中的水平条形图 在 iOS 16 中用 SwiftUI Charts 创建一个折线图 在 iOS16 中用 SwiftUI 图表定制一个线图...在 Swift 图表中使用 Foudation 库中的测量类型 开始图表布局 SwiftUI 对探索不同布局和预览实时视图结果是很友好的。...图表会调整到适合它所处的容器视图之中。同样的图表可以放到任何没有其他视图的新试图上，当设备旋转时，图标将会充满空间并调整大小。...图标被设置为固定大小，视图被嵌入到 ScrollView 中，以便在设备旋转时滚动。...SwiftUI 是一个很好的平台，用于创建视图和快速重构独立的子视图。在 SwiftUI 中构建条形图需要做一些工作，随着使用数据来试用条形图，可以确定更多的定制化。
在 SwiftUI 中，系统收回了上述的权利，开发者基本丧失了对视图生命周期的掌控。...SwiftUI 的视图 在 SwiftUI 中，视图定义了一块用户界面，并以视图树的形式组织在一起，SwiftUI 通过解析视图树来创建合适的渲染。...类型树在编译后就已经固定，在 app 的生命周期内都不会发生变化。 视图值树 在 SwiftUI 中，视图是状态的函数[2]。...•在 TabView 中，SwiftUI 在一开始就为所有 tab 对应的视图创建了实例。 类似上面的情况还有不少。这也就很好的解释了，很多开发者都会碰到某些视图莫名多次初始化的情况。...ScrollView + VStack 中，即使 Cell 视图没有显示在屏幕中，仍会触发 onAppear ScrollView { VStack { ForEach(0..<100
我们预览下今天要实现的 3D scroll 效果。学完本教程后，你就可以在你的 App 中把这种 3D 效果加入任何自定义的 SwiftUI 视图。下面我们来开始本教程的学习。...入门 首先，创建一个新的 SwiftUI 视图。为了举例说明，在这个新视图中，我会展示一个有各种颜色的矩形列表，并把新视图命名为 ColorList。...在 ScrollView 嵌套中添加一个 HStack，如下： var body: some View { ScrollView(.horizontal, showsIndicators: false...内部根据 colors 中的数据分别创建不同颜色的矩形。...axis 参数是一个元组类型，它定义了在使用你传入的角度参数时，哪一个坐标轴要发生改变。在本例中，是 Y 轴。 rotation3DEffect() 方法的文档可以在苹果官方网站的 这里 找到。
SwiftUI案例：天气 效果 目标 实现静态的仿iOS天气APP程序 文件与配置 外观配置 外观配置需要从 '代码' 中下载文件并提取对应的图片 需要配置在 Assets.xcassets...文件中 需要配置在 SpriteFiles/Assets.xcassets 文件中 动态图片导入 在工作区的项目文件夹下创建名为 SpriteFiles 的 Group 并在其中依次导入...RainFall.sks RainFallLanding.sks 创建View视图 在工作区的项目文件夹下创建名为 View 的 Group 并在其中依次创建 Home.swift CustomStackView.swift...CustomCorner.swift WeatherDataView.swift 视图文件 创建Model模板 在工作区的项目文件夹下创建名为 Model 的 Group 并在其中创建 Forecast.swift...视图与模板实现 ContentView.swift 这是应用视图的总体框架布局，需要自适应屏幕尺寸 import SwiftUI struct ContentView: View { var
NavigationView + NavigationLink 的界面跳转，在苹果给的 SwiftUI 的使用例子中就是这样写的，当然我们在正常的使用中这样写也没啥问题，那我们界面跳转的问题是什么呢？...GeometryReader 的主要作用就是能够获取到父View建议的尺寸，这就是它的主要作用，要没有它我们面临的可能就是无休止的传值了，SwiftUI 既然是声明式的UI,按我的理解你就没有办法去获取某一个视图的父视图之类的...有一个还得说明一下，GeometryReader 改变了它显示内容的方式。在 iOS 13.5 中，内容放置方式为 .center。在 iOS 14.0 中则为：.topLeading。...3、再提一点关于上面说的滚动视图，在UIKit中我们可以用UICollectionView搞定一切，但是在SwiftUI中没有这个控件，我建议采用的方式是 ScrollView + HStack + VStack...的方式去实现，很多同行有说目前来看SwiftUI的List在数据量大的情况下性能不是特别好，采用ScrollView是个不错的方式，而且也很容易构建出来，并不是说每一个Item的位置都需要你去计算，
在 UIKit 中，开发者需要利用 safeAreaInsets 或 safeAreaLayoutGuide ，才能确保将视图放置在界面中的可见部分。 SwiftUI 对上述过程进行了彻底的简化。...本文将探讨如何在 SwiftUI 中获取 SafeAreaInsets、将视图绘制到安全区域之外、修改视图的安全区域等内容。...在 SwiftUI 中，开发者通常只有在需要获取 StatusBar + NavBar 的高度或 HomeIndeicator + TabBar 的高度时才会使用到 safeAreaInsets 。...使用 safeAreaInset 扩展安全区域 在 SwiftUI 中，所有基于 UIScrollView 的组件（ScrollView、List、Form），在默认情况下都会充满整个屏幕，但仍可确保我们可以在安全区域内看到所有的内容...SwiftUI 中，有不少的功能都属于看一眼就会，但用起来就废的情况。
但是，SwiftUI 中的一些系统控件并没有完全遵循响应式的设计原则，由此在某些情况下会出现严重的错误，影响用户体验，并使开发者无所适从。...原文发表在我的博客 肘子的Swift记事本视图变化在前、状态变化在后在 SwiftUI 中，某些可编程控件在执行一定的操作时，会先更新视图，待视图变化完成后再修改与其对应的状态。...它的复现条件如下：iOS 16 系统，在真机或模拟器上测试点击视图列表中的按钮，可以进入下一级视图。...状态更新滞后不仅存在于本文介绍的两个案例中，当开发者遇到类似情况时，可以尝试采用状态更新优先的开发策略进行修改。总结今年 SwiftUI 已经进入了第五个年头。...随着版本的提高，SwiftUI 的功能也确实得到了相当程度的增加。不过，即使在最新的版本中，在一些对 UIKit（AppKit）进行二次包装的控件中，仍有不少细节处理不到位的问题。
需求 不久前，在 聊天室[3] 中，有网友提出了这样一个布局需求： 有两个竖向排列的视图。...padding-offset 二、AlignmentGuide 在 SwiftUI 中，开发者可以使用 alignmentGuide 修饰器来修改视图某个对齐指南的值（ 设置显式值 ）。...这意味着，在 ScrollView 中，子视图最好明确的设定尺寸（ 提出明确地需求尺寸 ）。因此，在上面的代码中，需要通过屏幕高度和视图一的高度差来计算上方的空白站位视图高度。...scrollDisabled（ 则让我们可以在 iOS 16+ 中屏蔽 ScrollView 的滚动手势 ）。...五、LayoutPriority 在 SwiftUI 中，设置视图优先级（ 使用 layoutPriority ）是一个好用但并不常用的功能。
但是，SwiftUI 中的一些系统控件并没有完全遵循响应式的设计原则，由此在某些情况下会出现严重的错误，影响用户体验，并使开发者无所适从。...视图变化在前、状态变化在后 在 SwiftUI 中，某些可编程控件在执行一定的操作时，会先更新视图，待视图变化完成后再修改与其对应的状态。这些控件基本上都是对 UIkit（AppKit）的二次包装。...它的复现条件如下： iOS 16 系统，在真机或模拟器上测试 点击视图列表中的按钮，可以进入下一级视图。...状态更新滞后不仅存在于本文介绍的两个案例中，当开发者遇到类似情况时，可以尝试采用状态更新优先的开发策略进行修改。 总结 今年 SwiftUI 已经进入了第五个年头。...随着版本的提高，SwiftUI 的功能也确实得到了相当程度的增加。不过，即使在最新的版本中，在一些对 UIKit（AppKit）进行二次包装的控件中，仍有不少细节处理不到位的问题。
需求 不久前，在 聊天室 中，有网友提出了这样一个布局需求： 有两个竖向排列的视图。...图片 二、AlignmentGuide 在 SwiftUI 中，开发者可以使用 alignmentGuide 修饰器来修改视图某个对齐指南的值（ 设置显式值 ）。...这意味着，在 ScrollView 中，子视图最好明确的设定尺寸（ 提出明确地需求尺寸 ）。因此，在上面的代码中，需要通过屏幕高度和视图一的高度差来计算上方的空白站位视图高度。...scrollDisabled（ 则让我们可以在 iOS 16+ 中屏蔽 ScrollView 的滚动手势 ）。...五、LayoutPriority 在 SwiftUI 中，设置视图优先级（ 使用 layoutPriority ）是一个好用但并不常用的功能。
在 iOS 16 中，SwiftUI 增加了一个新的自适应布局容器 ViewThatFits。正如其名称所示，它的作用是在给定的多个视图中找出最合适的视图并使用。...理想尺寸（ Ideal Size ） 在 SwiftUI 中，相较于建议尺寸，很多开发者对理想尺寸接触的较少，理解的也不太深入。...在 SwiftUI 中，我们可以通过 frame 来修改视图在理想状态下的呈现。...创建 ViewThatFits 的复刻版本 在学习 SwiftUI 的过程中，我经常尝试复刻一些布局容器和修饰符。通过这个过程，除了验证我的一些猜想外，还能更深入地理解和掌握它们。...但是，与任何强大的工具一样，能否发挥期作用来自于深入理解其使用方式和限制。 在本文中，我们对 SwiftUI 中的 ViewThatFits 容器进行了深入的探索。
因此在 SwiftUI 中，掌握两种导航容器的状态表述差异是实现自适应导航方案的关键。...在栈中推送和弹出数据的过程对应了导航容器中添加和移除视图的操作。弹出全部数据相当于返回根视图，推送多个数据相当于一次性添加多个视图并直接跳转到最后数据所代表的视图。...需要特别注意的是，在 NavigationStack 中，根视图是直接通过代码声明的，并不存在于“栈”中。...例如：在 A 中修改状态 b，B 响应 b 状态；在 B 中修改状态 c，C 视图响应状态 c。...不要忘记 NavigationStack 的根视图不在它的“栈”数据中在本例中，转换至 NavigationStack 时，需要将 Detail 列中声明的视图添加到“栈”的底端。反过来则将其移除。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
云直播
实时音视频
