首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

在HStack - SwiftUI中有2个列表/滚动视图时,NavigationView不会折叠

在HStack - SwiftUI中有2个列表/滚动视图时,NavigationView不会折叠。NavigationView是SwiftUI中用于创建导航界面的视图容器。它通常用于在应用程序中管理多个视图之间的导航关系。然而,在HStack中使用多个列表或滚动视图时,NavigationView不会自动折叠。

这是因为HStack是一个水平布局容器,它将其中的视图水平排列。当在HStack中放置多个列表或滚动视图时,它们将并排显示,并且NavigationView将保持其原始大小,不会自动折叠。

要解决这个问题,可以考虑以下几种方法:

  1. 使用NavigationView的导航链接(NavigationLink)来实现导航:在HStack中,可以使用NavigationLink来创建可点击的链接,以实现视图之间的导航。通过在NavigationLink中嵌套列表或滚动视图,可以在点击链接时切换到相应的视图。
  2. 使用ScrollView包装列表或滚动视图:如果希望在HStack中显示多个列表或滚动视图,并且希望它们可以滚动,可以将它们包装在ScrollView中。这样,即使列表或滚动视图的内容超出了屏幕的宽度,用户仍然可以通过滚动来查看它们。
  3. 考虑重新设计界面布局:如果在HStack中同时显示多个列表或滚动视图,并且希望NavigationView能够折叠,可以考虑重新设计界面布局。可能需要将列表或滚动视图放置在不同的容器中,或者使用其他布局容器来实现所需的界面效果。

总结起来,虽然在HStack中使用多个列表或滚动视图时,NavigationView不会自动折叠,但可以通过使用导航链接、ScrollView包装或重新设计界面布局来解决这个问题。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

优化 SwiftUI List 中显示大数据集的响应效率

找寻问题原因 或许有人会认为,毕竟数据量较大,进入列表视图有一定的延迟是正常的。但即使 SwiftUI 的效能并非十分优秀的今天,我们仍然可以做到以更小的卡顿进入一个数倍于当面数据量的列表视图。...列表视图的初始化和 body 求值 如果对 SwiftUINavigationView 有一定了解的话,应该知道 SwiftUI 会对 NavigationLink 的目标视图进行预实例化(但不会对...也就是当显示主界面菜单列表视图已经完成了实例的创建(可以通过 ListEachRowHasID 的构造函数中添加打印命令得以证明),因此也不应是实例化列表视图导致的延迟。...新的问题 细心的朋友应该可以注意到,运行解决方案一的代码后,第一次点击 bottom 按钮,大概率会出现延迟情况(并不会立即开始滚动)。...,并在首次滚动列表底部也没有延迟。

9.1K20

解析SwiftUI布局细节(二)循环轮播+复杂布局

如果你看了我们 Demo中的代码,你就知道我们是采用 TabView 嵌套 NavigationView 的形式,在这样的模式下似乎是存在问题的, TabView+NavigationView 中你利用...通过它我们可以避免初始 View 创建 ObservableObject, 而是从环境中获取 ObservableObject,像 @EnvironmentObject,@ObservedObject...GeometryReader 的主要作用就是能够获取到父View建议的尺寸,这就是它的主要作用,要没有它我们面临的可能就是无休止的传值了,SwiftUI 既然是声明式的UI,按我的理解你就没有办法去获取某一个视图的父视图之类的...3、再提一点关于上面说的滚动视图UIKit中我们可以用UICollectionView搞定一切,但是SwiftUI中没有这个控件,我建议采用的方式是 ScrollView + HStack + VStack...循环轮播实现 ---- 总结一下循环轮播怎么实现,采用的方案就是 HStack + Gesture + Timer 的方式,这三者就能实现一个自动循环滚动或者手动滚动的轮播。

12K20
  • 用NavigationViewKit增强SwiftUI的导航视图

    由于SwiftUI原生提供的导航手段能力有限,因此之前的版本中,NavigationView总是使用的不是那么的顺手。...下的任意视图通过代码直接返回根视图NavigationView下的任意视图中通过代码直接跳转到新视图(无需视图中描述NavigationLink)•通过NotificatiionCenter,指定应用程序中的任意...视图中支持SwiftUI原生的所有定义,例如toolbar、navigationTitle等。 目前启用转场动画,title和toolbar会在转场动画后才显示,观感稍有不足。日后尝试解决。...当iPhone Max横屏NavigationView的表现会同iPad一样双列显示,让应用程序不同iPhone上的表现不一致。...提醒后旋转了方向,再次进入竖屏状态则不会二次触发提醒。

    3.2K20

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

    我们创建完 100 条数据后,重启应用( 重启可以更精准地测量内存占用情况 )并滚动列表至底部。此时该应用的内存占用为 1.6 GB 左右。...无优化滚动至底截屏 从 Instruments 的分析来看,随着列表滚动,内存占用持续增加中。 无优化效果 相信任何开发者都无法容忍这种内存占用的情况出现。...当子视图进入惰性容器的可视区域SwiftUI 会调用它的 onAppear 闭包,子视图退出可视区域,会调用 onDisappear 闭包。...尽管从表面上来看,惰性容器仅会在视图进入可视区域才会对其进行操作,但一旦该视图被显示过( body 被求过值 ),即使该视图离开可视区域,SwiftUI 仍会保存视图的 body 值。...只有访问这些托管属性,Core Data 才会为托管对象进行数据填充( 如果行缓存中有,从缓存中取;如果没有则将数据从数据库中搬运到行缓存后再从缓存中取 )。

    1.3K10

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

    我们创建完 100 条数据后,重启应用( 重启可以更精准地测量内存占用情况 )并滚动列表至底部。此时该应用的内存占用为 1.6 GB 左右。...当子视图进入惰性容器的可视区域SwiftUI 会调用它的 onAppear 闭包,子视图退出可视区域,会调用 onDisappear 闭包。...尽管从表面上来看,惰性容器仅会在视图进入可视区域才会对其进行操作,但一旦该视图被显示过( body 被求过值 ),即使该视图离开可视区域,SwiftUI 仍会保存视图的 body 值。...本例中,子视图的 body 值中一定会包含用于显示的图片数据,因此,即使该视图已经被显示过( 滚动出显示区域 ),该视图的 body 值仍将占用不小的内存。...只有访问这些托管属性,Core Data 才会为托管对象进行数据填充( 如果行缓存中有,从缓存中取;如果没有则将数据从数据库中搬运到行缓存后再从缓存中取 )。

    2.4K40

    SwiftUI 4.0 的全新导航系统

    NavigationLink 仍需设定目标视图,会造成不必要的实例创建开销 较难实现从视图外调用导航功能 “能用,但不好用” 可能就是对老版本编程式导航比较贴切地总结。...", destination: SubView1(), tag: Target.subView1, selection: $selectedTarget) // SwiftUI 进入当前视图,无论是否进入目标视图...分栏布局 SwiftUI 4.0 之前的版本,可以这样使用 NavigationView 来创建拥有左右两个栏的编程式导航视图: class MyStore: ObservableObject {...macOS 上,detalOnly 不会起作用 如果想在 SwiftUI 4.0 之前的版本上使用类似的功能,可以参考我 用 NavigationViewKit 增强 SwiftUI 的导航视图[4]...navigationBar) } RocketSim_Screenshot_iPhone_13_Pro_Max_2022-06-12_09.12.01 NavigationStack 的 toolbar 背景色只有视图上滚才会显示

    10.3K62

    掌握 SwiftUI 的 Safe Area

    视图尚未在屏幕上可见,该视图的 safeAreaInset 也为 0 。... SwiftUI 中,开发者通常只有需要获取 StatusBar + NavBar 的高度或 HomeIndeicator + TabBar 的高度才会使用到 safeAreaInsets 。...从 iOS 14 开始,SwiftUI 计算视图的安全区域,将软键盘在屏幕上的覆盖区域(iPadOS 下,将软键盘缩小后键盘的覆盖区域将被忽略)也一并进行考虑。...safeAreaInsetList2 遗憾的是, iOS 15 之前,SwiftUI 并没有提供调整视图安全区的手段,如果我们想通过 SwiftUI 的手段创建一个自定义 Tabbar 列表中最后的内容将被...尽管使用 safeAreaInset 为列表底部添加状态栏或自定义 TabBar 非常方便,但如果你的列表中使用了 TextField,情况将变得很麻烦。

    7.7K31

    SwiftUI 中掌握 ScrollView 的使用:滚动可见性

    前言我们的滚动 API 中又有一个重要的新增功能:滚动可见性。现在,你可以获取可见标识符列表,或者快速检查并监控 ScrollView 内视图的可见性状态。...要了解有关 scrollTargetLayout 视图修饰符的更多信息,请查看我的文章《掌握 SwiftUI 中的 ScrollView:滚动几何》。...操作闭包内,我们获取可见标识符列表,并可以对可见项执行所需的操作。有时,视图需要在其可见性状态 ScrollView 中发生变化时进行响应。...运行这个 Demo,你会看到一个带有多个文本视图的 ScrollView,当你滚动,控制台会打印当前可见的项。...此外,页面底部有一个视频播放器,当视频播放器出现在视口内,它会自动播放,当其离开视口,会自动暂停。总结今天,我们学习了如何跟踪 ScrollView 内特定视图的可见性,并监控可见标识符列表

    14310

    SwiftUI 中的内容边距

    前言SwiftUI 引入了一组视图修饰符,使我们能够有效地管理视图中的安全区域。许多情况下,安全区域是你希望放置内容的地方。...使用 UIKit ,我们可以访问 readableContentGuide 布局指南。从字面上看,它是另一个安全区域,适应屏幕大小,但仅适用于文本内容。...然而,正如你所见,这也将滚动条指示器从后导边缘移到了中心。使用 contentMargins我们需要一种区分视图的内容和工具栏,并仅移动内容而保持工具栏原地的方法。...幸运的是,SwiftUI 引入了新的 contentMargins 视图修饰符,使我们能够视图中移动特定类型的内容。...文章从创建示例开始,展示了列表视图中如何处理内容边距的问题。

    16632

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

    欢迎大家 Discord 频道[2] 中进行更多地交流将某个视图视图中居中显示是一个常见的需求,即使对于 SwiftUI 的初学者来说这也并非难事。...即使文本宽度超出了 HStack 给出的建议宽度,但 HStack 布局,仍会保留其最小厚度,导致下图上方的文本无法充分利用矩形视图的宽度。解决方法为:Spacer(minLength: 0)。...HStack、VStack 进行布局,会为每个子视图提供四种不同的建议模式( 最小、最大、明确尺寸以及未指定 ),如果子视图不同的模式下返回的需求尺寸是不一样的,则意味着该视图是可变尺寸视图。...为布局容器设置明确的 spacing 是一个好习惯,未明确指定时,HStack、VStack 进行布局可能会出现某些异常。下文中也会碰到此种情况。...HStack、VStack 是不会给 Spacer 分配 spacing 的,毕竟 Spacer 本身就代表了空间占用。

    6.7K40

    SwiftUIHStack 和 VStack 的切换

    举个例子,假如我们正在构建一个 app 其中包含 LoginActionsView ,一个让用户登录列表中选择操作的类: struct LoginActionsView: View { ......background(Color.blue) .cornerRadius(10) } } 以上代码中,我们用到了 fixedSize 防止按钮文本被截断,这仅是我们确信给定的内容视图不会视图本身更大的情况...关键的区别在于(除了后者需要 iOS 16 )切换布局可以保留正在渲染的底层视图的标识,而在 HStack 和 VStack 之间切换就不会这样。...这样做会令动画更流畅,例如在切换设备方向,我们也有可能在执行此类更改时获得小幅的性能提升(因为 SwiftUI 总是在其视图层次结构为静态尽可能表现最佳) 选择合适的视图 但我们还没有结束,因为...就像字面意思一样,这种新的容器将会在我们初始化时传递的候选列表中,基于当前上下文挑选出最优视图

    2.8K10

    SwiftUI TextField 进阶 —— 事件、焦点、键盘

    视图中有多个 TextField ,通过 onSubmit 和 FocusState(下文介绍)的结合,可以给用户带来非常好的使用体验。... SwiftUI 3.0 中,苹果为开发者提供了一个远好于预期的解决方案,同 onSubmit 类似,可以从更高的视图层次来统一对视图中的 TextField 进行焦点的判断和管理。...使用快捷键获得焦点 当一个视图中有多个 TextField(包括 SecureField),我们可以直接使用Tab键按顺序 TextField 中切换焦点,但 SwiftUI 并没有直接提供使用快捷键让某个... SwiftUI 3.0 之前,我们必须在主视图上另外绘制或者使用非 SwiftUI 的方式来解决问题, SwiftUI 3.0 中,由于添加了原生设置键盘辅助视图(下文具体介绍)的功能,解决上述问题将不再困难...另外,有时候为了提高交互体验,我们可以希望用户录入结束后,无需点击return按键,通过点击屏幕其他区域或者以滚动列表的方式来取消键盘。同样也需要使用编程的方式让键盘消失。

    13.3K10

    架构之路 (五) —— VIPER架构模式(一)

    在此过程中,您还将了解您的iOS项目中的SwiftUI和Combine。 打开启动项目。这包括一些代码,让你开始: 当你构建其他视图,ContentView会启动它们。...Functional views组中有一些帮助视图:一个用于包装MapKit map视图,这是一个特殊的split image视图,由TripListCell使用。你会把这些加到屏幕上。...你可以Search Images的Pixabay API docs中找到它。 如果您现在构建并运行,您将不会看到任何有趣的东西。 然而,本教程结束,您将拥有一个功能齐全的道路旅行计划应用程序。...当您查看图表,您可以看到数据视图view和实体entities之间流动的完整路径。 SwiftUI有自己独特的做事方式。...当您将其放置NavigationView,该链接将成为一个按钮,将destination推送到导航堆栈上。 content块可以是任何一个SwiftUI视图

    17.5K10

    如何判断 ScrollView、List 是否正在滚动

    本文将介绍几种 SwiftUI 中获取当前滚动状态的方法,每种方法都有各自的优势和局限性。...: UIScrollView, willDecelerate decelerate: Bool)手指拖动结束后( 手指离开 ),调用此方法 SwiftUI 中,很多的视图控件是对 UIKit( AppKit...:PreferenceKey SwiftUI 中,子视图可以通过 preference 视图修饰器向其祖先视图传递信息( PreferenceKey )。...preference 与 onChange 的调用时机非常类似,只有值发生改变后才会传递数据。 ScrollView、List 发生滚动,它们内部的子视图的位置也将发生改变。...ScrollView + VStack( HStack )这类的组合,只需为可滚动视图添加一个 scrollSensor 即可。

    3.8K40

    解析SwiftUI布局细节(一)

    前言 ---- 在前面的文章中谈了谈对SwiftUI的基本的认识,以及用我们最常见的TB+NA的方式搭建了一个很基本的场景来帮助认识了一下SwiftUI,具体的文章可以SwiftUI分类部分查找...,这篇我准备写UI的时候从SwiftUI角度我们具体的应该怎样去做,或者说是用SwiftUI我们该从什么角度去解析一个页面。...以前我们用UIKit写一个列表页的时候我们的步骤可能是下面这样的: 1、创建视图控制器 2、大概解析一下UI,该创建头部的创建头部视图,该写CollectionViewCell或者...H(heng) 剩下的V就是纵向的,所有的iOS方向属性几乎都是这样,加深记忆的一个方式而已,但能保证你以后绝不会再搞混淆!...理解了之后我们也就能总结一下我们用SwiftUI写UI时候的一个简单逻辑 1、创建好你需要的SwiftUI文件 2、规划好你的视图层级,比如说是不是嵌套的NavigationView

    2.3K10

    深入了解 SwiftUI 5 中 ScrollView 的新功能

    当 scrollClipDisable 为 false 滚动内容会被裁剪以适应滚动容器边界。任何超出边界的部分将不会显示。...当 scrollClipDisable 为 true 滚动内容不会被裁剪。它可以延伸超出滚动容器的边界,从而显示更多内容。...可采用 优化 SwiftUI List 中显示大数据集的响应效率[5] 一文中介绍的方式来解决。 scrollPostion(id:) 使用此修饰符可以让滚动视图滚动到特定的位置。...(视图标识) 不支持锚点设定,固定锚点为子视图的 center 正如 优化 SwiftUI List 中显示大数据集的响应效率[6] 一文所提到的,当数据集很大,也会出现性能问题。...滚动停止,容器顶端将与子视图的顶部对齐(垂直模式下)。开发者可以通过控制 scrollTargetLayout 的启用与否来开关 viewAligned 的行为。

    79820

    SwiftUI 实现 3D Scroll 效果

    学完本教程后,你就可以在你的 App 中把这种 3D 效果加入任何自定义的 SwiftUI 视图。下面我们来开始本教程的学习。 入门 首先,创建一个新的 SwiftUI 视图。...为了举例说明,在这个新视图中,我会展示一个有各种颜色的矩形列表,并把新视图命名为 ColorList。...var colors: [Colors] 实现这个列表 body 变量的内部,删除掉占位 Text。...axis 参数是一个元组类型,它定义了使用你传入的角度参数,哪一个坐标轴要发生改变。本例中,是 Y 轴。 rotation3DEffect() 方法的文档可以苹果官方网站的 这里 找到。...当矩形屏幕上移动,你可以看到它们旋转。 我还修改了矩形的 cornerRadius 属性,并加上了投影效果,让它更美观。

    1.5K20

    自定义 SwiftUI 中符号图像的外观

    SwiftUI 中使用符号图像非常简单,只需使用 Image 视图和所需符号的系统名称。...使用多色渲染,我们无法自定义符号的颜色,它将使用预定义的颜色。...可变值 SwiftUI 中显示符号图像,我们可以提供一个 0.0 到 1.0 之间的可选值,渲染的图像可以使用它来自定义外观。如果符号不支持可变值,此参数无效。...轮廓变体工具栏、导航栏和列表中非常有效,而填充变体则用于强调选择的状态。...许多情况下,显示符号的视图会自动选择合适的变体。例如,iOS 标签栏通常使用填充变体,而导航栏则偏好轮廓变体。这种自动选择确保符号不同上下文中有效使用,而无需明确指定。

    10010

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

    阅读 The SwiftUI Layout Protocol [11]了解如何创建自定义布局。创建从底部开始的滚动视图Q:我如何实现一个底部对齐的滚动视图 macOS 上会不会有糟糕的性能?...我采用了常见的解决方案,即旋转滚动视图和里面的每个单元格,以获得预期的倒置列表 iOS 上,这很有效。但在 macOS 上,它使 CPU 使用率保持 100%。...但是,此转换仅在文本字段完成编辑才会发生,并且不会阻止输入非数字字符。目前 SwiftUI 没有 API 可以限制用户字段中输入的字符。...image-20221023171100484滚动速度Q:有好的方式 List 和 ScrollView 滑动监听滑动的 velocity 值么?... SwiftUI 中,有一个从第一版开始就存在但尚未公开的纯 SwiftUI 实现的滚动容器 —— _ScrollView 。

    14.8K30

    SwiftUI WWDC 24 之后的新变化

    视图集合SwiftUI 为 Group 和 ForEach 视图引入了新的重载,允许我们创建自定义容器,如 List 或 TabView。...SwiftUI 引入了新的 Subview 和 SubviewsCollection 类型,提供了对真实视图的代理访问。...NavigationStack 内从一个视图导航到另一个视图,使用相同的标识符和命名空间创建平滑的过渡。...滚动位置新的 ScrollPosition 类型与 scrollPosition 视图修饰符配对,允许我们读取 ScrollView 实例的精确位置。我们还可以使用它编程地滚动滚动内容的特定点。...今年的主要变化包括 @MainActor 隔离、视图集合的新重载、新的可定制标签栏体验、英雄动画、滚动位置的新功能以及新的 Entry 和 Previewable 宏。

    10210
    领券