首页
学习
活动
专区
圈层
工具
发布

SwiftUI 之 HStack 和 VStack 的切换

前言 SwiftUI 的各种堆栈是许多框架中最基本的布局工具,能够让我们定义组视图,这些组视图可以按照水平、垂直或覆盖视图对齐。...想了解更多信息,可以查看我的文章 - SwiftUI 布局系统第三章 目前,我们的按钮是垂直排列的,并且填满了水平线上的可用空间(你可以用以上示例代码预览按钮的样子),虽然这在竖向的 iPhone 上看起来很好...一种方式是用 GeometryReader 测量当前可用空间,并根据宽度是否大于其高度,可以选择使用 HStack 或 VStack 来渲染内容。...然而,就像上面的代码展示的那样,使用 GeometeryReader 来展示动态切换有一个相当明显的缺点,在几何图形阅读器中总是会填充水平和垂直方向的所有可用空间(以便测量实际空间)。...虽然我们也有很多方法能解决这些问题(例如使用类似在这篇 Q&A 中用来使多个视图具有相同宽度和高度的技术),但真正的问题是当我们要动态的确定方向时,测量可用空间是否是一个好的方法。

3.9K10

Skip Fuse 现在对独立开发者免费! -- 肘子的 Swift 周报 #0110

这不仅显著拓宽了可用依赖的范围,也降低了项目迁移与维护的复杂度。...,在三维空间中已不再适用。...Cristian Díaz[20]从“空间交互的可感知性与舒适性”出发,提出了一个动画决策框架:谁创作动画(设计师预制 vs. 运行时生成)、什么需要动画(SwiftUI 窗口 vs....在我的文章理解 SwiftUI 的视图刷新机制:从 TimelineView 刷新问题谈起[23]中,借由 TimelineView 个案系统阐述了视图声明、响应机制与递归更新的判定逻辑。...SwiftUI-DetectGestureUtil:为单个 SwiftUI 视图绑定多个自定义手势[27] 在 SwiftUI 中,让同一个视图同时识别多个手势一直是个棘手的问题。

24410
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    完成 Liquid Glass 的适配了吗?| 肘子的 Swift 周报 #0102

    一些系统组件在新旧版本间差异巨大,加之临近发布时仍存在不少未解决的 Bug,用户很难分辨问题到底源自系统还是应用本身。可以预见,接下来几周,开发者们免不了要在用户支持和问题解释上打一场"硬仗"。...深入理解 SwiftUI 的 TimelineView[10] TimelineView 是一个没有自身外观的容器视图,会在预定时间点重新绘制其内容,因而非常适合构建 实时时钟、计时器、动画可视化、实时数据或逐帧动画...[18] 在 SwiftUI 中,优化应用性能的关键之一是减少不必要的视图重绘。...然而,由于这涉及状态管理、依赖关系、视图比较等诸多机制,即便 SwiftUI 已经发布多年,依然有许多开发者理解不足。...[17] JNIKit: https://github.com/swifdroid/jni-kit [18] SwiftUI 重绘机制深度解析 (SwiftUI Redraw System In

    32810

    在 SwiftUI 中实现视图居中的若干种方法

    } .frame(width: 300, height: 60) // 相同的尺寸 .background(.red) Spacer() // 让 VStack 充满可用空间...另外,在给定尺寸不明的情况下( 未显式为矩形设置尺寸 ),上面的代码也需要进行一定的调整。...那么 HStack、VStack 会在明确了所有固定尺寸子视图的需求尺寸后,将所剩的可用尺寸( HStack、VStack 的父视图给他们的建议尺寸 - 固定尺寸子视图的需求尺寸 )平均分配( 在优先级相同的情况下...另外,由于 Color、Rectangle 会在两个维度进行填充( Spacer 会根据容器选择填充维度 ),因此,使用它们作为填充物时,将会自动使用全部的可用空间( 包括高度 ),无需通过 .frame...GeometryReader 将获得 300 x 60 的建议尺寸由于 GeometryReader 拥有与 Color、Rectangle 类似的特征,会将给定的建议尺寸作为需求尺寸( 表现为占用全部可用空间

    10.3K40

    GeometryReader :好东西还是坏东西?

    GeometryReader 的一些批评 开发者对 GeometryReader 的批评主要集中在以下两个观点: GeometryReader 会破坏布局:这种观点认为,由于 GeometryReader 会占用全部可用空间...在非滚动方向上,ScrollView 会向子视图提供该维度上的全部可用尺寸。而在滚动方向上,它向子视图提供的建议尺寸为 nil。...因此,可能会有开发者认为 GeometryReader 并没有按照预期充满全部的可用空间。但实际上,它的显示结果是完全正确的,这就是正确的布局结果。...GeometryReader 常用于需要限定比例的场景,例如让视图占据可用空间的 25% 宽度,或者像上文中根据给定的高宽比来计算高度。...另外,GeometryReader 经常用于按照一定比例分配两个视图的空间。

    2.8K70

    SwiftUI 中布局的工作原理

    SwiftUI 中布局的工作原理 ---- 所有的 SwiftUI 布局都有三个简单的步骤,理解这些步骤是每次获得优秀布局的关键。步骤如下: 父视图提供一个大小并询问其子视图的大小。...子视图根据自己的信息,它会选择自己的尺寸,而父视图必须尊重这个选择。 然后父视图在其坐标空间中定位子视图。...嘿,SwiftUI:我需要X * Y像素。” SwiftUI:“好的。那么,这会留下很多空间,所以我会把你的尺寸放在中间。”(父视图在其坐标空间中定位子视图。)...background(Color.red)),文本视图成为其背景的子视图。当涉及到视图及其修改器时,SwiftUI有效地从下到上工作。...首先,如果视图层次结构完全是布局中立的,那么它将自动占用所有可用空间。

    5.3K20

    掌握 ViewThatFits

    在 iOS 16 中,SwiftUI 增加了一个新的自适应布局容器 ViewThatFits。正如其名称所示,它的作用是在给定的多个视图中找出最合适的视图并使用。...一个能够适应可用空间的视图,它提供的是第一个能够适应的子视图 public struct ViewThatFits : View where Content : View {...首先,ViewThatFits 需要获取它所能使用的空间,也就是其父视图给出的建议尺寸。 判断顺序根据 ViewBuilder 闭包中的顺序,从上至下逐个对子视图进行。...一个 ViewThatFits 最终会选择那个子视图,取决于以下几个因素: ViewThatFits 可用的空间(它的父视图给它的建议尺寸) ViewThatFits 设定的受限轴 子视图的在受限轴上的理想尺寸...在 SwiftUI 中,我们可以通过 frame 来修改视图在理想状态下的呈现。

    1.3K10

    Ask Apple 2022 与 SwiftUI 有关的问答(下)

    ,只提取你需要的属性,并依靠 SwiftUI 的 equality 检查来提前中止无效计算苹果工程师给出的答案与 避免 SwiftUI 视图的重复计算[5] 一文中的很多建议都一致。...可以用类似字典的方式对元素进行操作,快速定位,同时在更新 IdentifiedArray 时,也不容易引发 ForEach 的异常todos[id:id] = newTodo自定义布局Q:在实现自定义布局时,处理非常小或非常大的可用空间的边缘情况有多重要...如果容器对 zero 和 infinite 的可用空间提出要求,需要用以确定最小和最大的尺寸,至少应该考虑这些情况。除此以外,当你试图实现一个可以在各种情况下使用通用的布局时,一定要考虑!...软弃用Q:最近,我注意到新的 @ViewBuilder 函数在以前的版本中是不可用的,弃用信息提示我使用新的方法取代老方法,这是 SwiftUI 的 API 设计缺陷还是我错过了什么?...但这个滚动有两大问题,1、是一个未公开的半成品,有可能会被从 SwiftUI 框架中移除;2、不支持懒加载,即使和 Lazy 视图一起使用也会一次性加载全部的视图。

    19.9K30

    SwiftUI + Core Data App 的内存占用优化之旅

    下文中,我们将对这段代码进行逐步优化,以达到最终可用的程度。 第一轮优化:对视图 body 值进行优化 在第一轮优化中,我们会首先尝试从 SwiftUI 的角度入手。...当子视图进入惰性容器的可视区域时,SwiftUI 会调用它的 onAppear 闭包,子视图退出可视区域时,会调用 onDisappear 闭包。...尽管从表面上来看,惰性容器仅会在视图进入可视区域时才会对其进行操作,但一旦该视图被显示过( body 被求过值 ),即使该视图离开可视区域,SwiftUI 仍会保存视图的 body 值。...同未优化过的代码一样,随着数据量的增大,内存的占用也将随之提高。在 400 条记录的情况下,滚动到底部,内存占用值差不多是 1.75 GB。...即使我们在 onDisappear 中将该变量设置为 nil,但 SwiftUI 并没有释放之前它所占用的空间。

    3.5K40

    SwiftUI + Core Data App 的内存占用优化之旅

    下文中,我们将对这段代码进行逐步优化,以达到最终可用的程度。 第一轮优化:对视图 body 值进行优化 在第一轮优化中,我们会首先尝试从 SwiftUI 的角度入手。...当子视图进入惰性容器的可视区域时,SwiftUI 会调用它的 onAppear 闭包,子视图退出可视区域时,会调用 onDisappear 闭包。...尽管从表面上来看,惰性容器仅会在视图进入可视区域时才会对其进行操作,但一旦该视图被显示过( body 被求过值 ),即使该视图离开可视区域,SwiftUI 仍会保存视图的 body 值。...同未优化过的代码一样,随着数据量的增大,内存的占用也将随之提高。在 400 条记录的情况下,滚动到底部,内存占用值差不多是 1.75 GB。...即使我们在 onDisappear 中将该变量设置为 nil,但 SwiftUI 并没有释放之前它所占用的空间。

    2.8K10

    ViewBuilder 研究(下) —— 从模仿中学习

    视图能够提供的信息 本文中的视图是指符合 SwiftUI View 协议的各种类型 开发者通过 SwiftUI 框架提供的基础视图类型将自定义的视图串联起来,这些视图将向 SwiftUI 提供如下的信息...视图类型 SwiftUI 根据视图层次结构(视图树)中的视图类型和具体位置来区分视图(谁是谁)。对 SwiftUI 来说视图的类型本身就是最重要的信息之一。 其他 与当前视图有关的一些轻量级代码。...支持 API 可用性检查 result builders 通过 buildLimitedAvailablility[9] 提供对 API 可用性检查的支持。...它会和 buildOptional 或 buildEither 一并使用,在满足了 API 可用性检查的情况下会调用该实现。...提供了更多的表述空间。

    3.6K20

    探讨 SwiftUI 中的几个关键属性包装器

    如果数据不需要复杂的跨视图共享,使用 @State 可以简化状态管理。 注意事项 尽量仅在视图的内部使用 @State,即使未显式标记为 private,也应当将其视为视图的私有属性。...详见 避免 SwiftUI 视图的重复计算[7]。 如果不需要在当前视图或在子视图中(通过 @Binding )修改值,无需使用 @State。...在引入第三方提供的符合 ObservableObject 实例时,应确保 @ObservedObject 引用的对象在整个视图的生命周期中都是可用的,否则可能导致运行时错误。...它允许视图访问由 SwiftUI 或应用环境提供的数据、实例或方法。...@State 和 @Environment 不限于只能存储值类型,但也可用于其他类型。

    4.2K10

    【愚公系列】《AIGC辅助软件开发》013-AI辅助客户端编程:AI辅助 iOS 应用开发

    `Spacer`- **功能**:`Spacer` 是一个特殊的 SwiftUI 视图组件,用于在视图之间创建一个弹性空间。`Spacer` 会占据可用的空间,将其他视图推向一边。### 11....`padding`- **功能**:`padding` 是一种视图修饰符,用于在视图周围添加内边距,使视图与其边界之间留出一定的空间。...在 SwiftUI 中,`.padding()` 是一个视图修饰符,用于为视图的四周添加内边距,使得视图内容与它的边界之间留出一定的空间。...### 总结`.padding()` 是 SwiftUI 中用于控制视图和其边界之间空间的工具。...使用 `VStack` 和 `Spacer``Spacer()` 是 SwiftUI 中用于占用空间并将视图推向某个方向的组件。

    5.8K10

    如何在 SwiftUI 中创建条形图

    系列文章 如何在 SwiftUI 中创建条形图 SwiftUI 中的水平条形图 在 iOS 16 中用 SwiftUI Charts 创建一个折线图 在 iOS16 中用 SwiftUI 图表定制一个线图...在 Swift 图表中使用 Foudation 库中的测量类型 开始图表布局 SwiftUI 对探索不同布局和预览实时视图结果是很友好的。...GeometryReader 被用来确定条形图的可用高度。数据中的最大值得到后并传递给每个 BarView。...图表会调整到适合它所处的容器视图之中。同样的图表可以放到任何没有其他视图的新试图上,当设备旋转时,图标将会充满空间并调整大小。...SwiftUI 是一个很好的平台,用于创建视图和快速重构独立的子视图。在 SwiftUI 中构建条形图需要做一些工作,随着使用数据来试用条形图,可以确定更多的定制化。

    8.3K10

    打造可适配多平台的 SwiftUI 应用

    相较于 iPhone 版本,iPad 版本除了为了利用更大的屏幕空间对布局做出了一定的调整外,还提供了多窗口运行的能力,使用者可以在每个窗口中独立进行操作。...图片为了避免在适配其他平台时重复调整代码,我们可以采用类似于 horizontalSizeClass 的方式(通过环境变量),创建一个可用于所有需要适配平台的自定义环境变量来解决这个问题。...在 SwiftUI 中,除了环境值外,另一个具备较多平台“限制”的部分就是视图的 Modifier。...当我们将“电影猎手”从 iPhone 移植到 iPad 或 Mac 上时,除了屏幕可用空间更大之外,另一个显着的变化是使用者可以同时打开多个窗口,并可以在不同的窗口中对“电影猎手”进行独立的操作。...我们都知道 SwiftUI 是一个声明式框架。这不仅意味着开发者可以通过声明的方式来构造视图,而且场景(对应着独立的窗口)甚至整个 App 都是基于声明式代码来创建的。

    5.1K80

    Arc、Dia、TCA 与 SwiftUI | 肘子的 Swift 周报 #086

    随着 WWDC 2025 的临近,SwiftUI 已即将步入第七个年头。回顾过去,与 UIKit 在相同发展阶段相比,SwiftUI 在功能完整性、稳定性以及开发者接受程度方面依然有不少成长空间。...简单粗暴地“全量支持”反而可能让应用的可用性变差。...Shaun[9]深入探讨了动态字体引发的典型问题(如内容无法滚动、水平空间不足等),并给出了 SwiftUI 下的实用解决方案,包括 ScrollViewIfNeeded、ViewThatFits与 dynamicTypeSize...该框架支持 SwiftUI,只需使用 .moveToSky()修饰符,即可将任意视图移动至系统最顶层空间。...⚠️ 注意:该库基于私有 API 实现,不需要特殊沙箱权限,可用于 Mac App Store,但仍存在系统兼容性风险。

    53410
    领券