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

SwiftUI:将List放入ScrollView (get List的内容高度)

SwiftUI是苹果公司推出的一种用户界面开发框架,用于构建iOS、macOS、watchOS和tvOS应用程序。它采用声明式语法,简化了界面的构建过程,并提供了丰富的UI组件和布局选项。

在SwiftUI中,可以使用ScrollView来创建可滚动的视图,并且可以将List放入ScrollView中。这样做的好处是可以在List的内容超出屏幕高度时,通过滚动来查看所有内容。

要将List放入ScrollView中并获取List的内容高度,可以使用GeometryReader来测量视图的大小。具体步骤如下:

  1. 创建一个ScrollView,并将List作为其子视图。
  2. 在List外部使用GeometryReader包裹,并传入一个GeometryProxy参数。
  3. 在GeometryReader的content闭包中,将List作为返回的视图,并使用GeometryProxy的size属性来获取List的大小。

示例代码如下所示:

代码语言:txt
复制
ScrollView {
    GeometryReader { geometry in
        List {
            // List的内容
        }
        .frame(height: geometry.size.height)
    }
}

在这个示例中,ScrollView包含了一个GeometryReader,并将List作为其子视图。通过设置List的frame高度为GeometryProxy的size.height,List的高度将根据ScrollView的大小进行自适应。

需要注意的是,如果List的内容较多,可能会导致性能问题。在这种情况下,可以考虑使用LazyVStack或LazyHStack来延迟加载列表项,以提高性能。

推荐的腾讯云相关产品:腾讯云服务器(CVM)和腾讯云容器服务(TKE)。腾讯云服务器提供了可靠的云计算基础设施,适用于部署和运行各种应用程序。腾讯云容器服务是一种高度可扩展的容器管理服务,可帮助您轻松部署、管理和扩展容器化应用程序。

更多关于腾讯云服务器和腾讯云容器服务的信息,请访问以下链接:

请注意,以上答案仅供参考,具体的技术实现和推荐产品可能会根据实际需求和情况而有所不同。

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

相关·内容

WWDC 23 之后 SwiftUI 有哪些新功能

前言 WWDC 23 已经到来,SwiftUI 框架中有很多改变和新增功能。在本文中将主要介绍 SwiftUI 中数据流、动画、ScrollView、搜索、新手势等功能新变化。...框架引入了新 PhaseAnimator 视图,它遍历阶段序列,允许为每个阶段提供不同动画,并在阶段更改时更新内容。...ScrollView 今年 ScrollView 有了很多优秀新增功能。首先,可以使用 scrollPosition 视图修饰符来观察内容偏移量。...scrollTargetLayout() } .scrollPosition(id: $scrollPosition) } } 如上例所示,使用 scrollPosition 视图修饰符内容偏移量绑定到一个状态属性上...特别感谢 Swift社区 编辑部每一位编辑,感谢大家辛苦付出,为 Swift社区 提供优质内容,为 Swift 语言发展贡献自己力量。 - EOF -

31920

如何判断 ScrollViewList 是否正在滚动中

访问我博客 www.fatbobman.com[1] 可以获得更好阅读体验以及最新更新内容。...欢迎大家在 Discord 频道[2] 中进行更多地交流判断一个可滚动控件( ScrollViewList )是否处于滚动状态在某些场景下具有重要作用。...本文介绍几种在 SwiftUI 中获取当前滚动状态方法,每种方法都有各自优势和局限性。...preference 与 onChange 调用时机非常类似,只有在值发生改变后才会传递数据。在 ScrollViewList 发生滚动时,它们内部子视图位置也发生改变。...判断准确度没有前两种方式高当可滚动组件中内容出现了非滚动引起尺寸或位置变化( 例如 List 中某个视图尺寸发生了动态变化 ),本方式会误判断为发生了滚动,但在视图变化结束后,状态会马上恢复到滚动结束滚动开始后

3.7K40

掌握 SwiftUI Safe Area

本文探讨如何在 SwiftUI 中获取 SafeAreaInsets、视图绘制到安全区域之外、修改视图安全区域等内容。...在 SwiftUI 中,开发者通常只有在需要获取 StatusBar + NavBar 高度或 HomeIndeicator + TabBar 高度时才会使用到 safeAreaInsets 。...从 iOS 14 开始,SwiftUI 计算视图安全区域时,软键盘在屏幕上覆盖区域(iPadOS 下,软键盘缩小后键盘覆盖区域将被忽略)也一并进行考虑。...使用 safeAreaInset 扩展安全区域 在 SwiftUI 中,所有基于 UIScrollView 组件(ScrollViewList、Form),在默认情况下都会充满整个屏幕,但仍可确保我们可以在安全区域内看到所有的内容...表现正常),无法列表最后内容全部显示完整。

7.5K31

深入了解 SwiftUI 5 中 ScrollView 新功能

之前在 List 或 TextEditor 中实现类似操作是十分困难。 默认 ContentMarginPlacement(.automatic)导致指示器与内容之间长度不一致。...可采用 优化在 SwiftUI List 中显示大数据集响应效率[5] 一文中介绍方式来解决。 scrollPostion(id:) 使用此修饰符可以让滚动视图滚动到特定位置。...(视图标识) 不支持锚点设定,固定锚点为子视图 center 正如 优化在 SwiftUI List 中显示大数据集响应效率[6] 一文所提到,当数据集很大时,也会出现性能问题。...就我个人而言,在 SwiftUI 5 中,ScrollView 原生方案已经能够满足大多数需求,因此我们看到更多人采用 ScrollView + LazyStack 组合方式。.../posts/optimize_the_response_efficiency_of_List/ [6] 优化在 SwiftUI List 中显示大数据集响应效率: https://www.fatbobman.com

65920

SwiftUI 视图生命周期研究

什么是视图 开发者更习惯符合 View 协议结构体或结构体实例视作视图,而在 SwiftUI 角度,视图值树上节点内容,才是它所认为视图。...比如在 List 和 LazyVStack 中,Cell 视图在创建之后即使滚动出屏幕不参与布局与渲染,但 SwiftUI 仍会保留这些视图数据,直到 List 或 LazyVStack 被销毁。...•在 List 和 LazyVStack 中,SwiftUI 出于效率考虑,即使 Cell 视图移出显示范围,它视图仍将保留在视图值树上(视图仍将存续)。...另外,由于 List 和 LazyVStack 布局逻辑不同(List 容器高度是固定,LazyVStack 容器高度是不固定,向下预估),两者触发 onDisappear 时机点也不同。...开发者即使不了解文本上述内容,也可以让 SwiftUI 代码在日常中发挥出不错效率。但如果能够对视图生命周期有更深入了解,将可以帮助开发者在一些特定场合提高代码执行效率。

4.3K30

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

具体我们Demo中可以看看“我”页面那个 List 代码,问题就在那里。要理解这点麻烦也给我说说,感谢!...有一个还得说明一下,GeometryReader 改变了它显示内容方式。在 iOS 13.5 中,内容放置方式为 .center。在 iOS 14.0 中则为:.topLeading。...3、再提一点关于上面说滚动视图,在UIKit中我们可以用UICollectionView搞定一切,但是在SwiftUI中没有这个控件,我建议采用方式是 ScrollView + HStack + VStack...方式去实现,很多同行有说目前来看SwiftUIList在数据量大情况下性能不是特别好,采用ScrollView是个不错方式,而且也很容易构建出来,并不是说每一个Item位置都需要你去计算,...除了这个List,还要一个From我们也可以了解下,他们俩肉眼可见区别 在选中这个点上区别。

11.8K20

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

A:你最好选择是使用 ScrollView 和 ScrollViewReader,并在 onAppear 或新内容进来时滚动到最底部视图。我不建议尝试旋转滚动视图。...目前还没有 API 可以程序化地焦点转至搜索字段。TextField 内容验证Q:如何实现一个只接受数字 SwiftUI TextField,小数是允许。...背景扩展到安全区域Q:如果我有一个自定义容器类型,可以接受一个顶部和底部视图,是否有办法让 API 调用者所提供视图背景扩展到安全区域内,同时内容( 如文本或按钮 )保留在安全区域内?...贴一个临时解决方案。image-20221023171100484滚动速度Q:有好方式在 ListScrollView 滑动时监听滑动 velocity 值么?...在 SwiftUI 中,有一个从第一版开始就存在但尚未公开SwiftUI 实现滚动容器 —— _ScrollView

14.7K30

SwiftUI 中创建自适应程序化导航方案

尤其当用户开启了台前调度( Stage Manager )功能后,应用对不同视觉大小模式兼容能力就越发显得重要。本文将就如何创建可自适应不同尺寸模式程序化导航方案这一内容进行探讨。...访问我博客 www.fatbobman.com[1] 可以获得更好阅读体验以及最新更新内容。...,请参阅 SwiftUI 4.0 全新导航系统[3] 一文。...我们可以 NavigationSplitView 视为具备一些预置能力 HStack,通过在其中声明两个或三个视图从而创建两列或三列导航界面。...但如此一来,自动转换无法应对这类场景。开发者需要自行对两种导航逻辑状态进行转换。方案三演示如何进行这一过程。

4.2K30

GeometryReader :好东西还是坏东西?

一个容器视图,根据其自身大小和坐标空间定义其内容。 严格来讲,我并不完全赞同上述描述。这并非因为存在事实上错误,而是这种表述可能会引起用户误解。...官方文档中“定义其内容( defines its content )”这一表述容易让人误以为 GeometryReader 主要功能是主动影响子视图,或者说其获取几何信息主要用于子视图,但实际上,...提供建议宽度,并根据这个宽度计算出所需高度。...然后,通过 frame 调整 GeometryReader 向 ScrollView 提交需求尺寸高度。这样,我们就能得到期望显示结果。...GeometryReader 常用于需要限定比例场景,例如让视图占据可用空间 25% 宽度,或者像上文中根据给定高宽比来计算高度

43770

SwiftUI 方式进行布局

本文通过用多种手段完成同一需求方式,展示 SwiftUI 布局系统强大与灵活,并通过这些示例让开发者对 SwiftUI 布局逻辑有更多认识和理解。...有关这方面的内容,请参阅 SwiftUI 布局 —— 尺寸( 下 )[4] 一文中“面子和里子”章节。...有关建议尺寸、需求尺寸等内容,请参阅 SwiftUI 布局 —— 尺寸( 上 )[5] 一文 三、NameSpace 从 3.0 版本( iOS 15 )开始,SwiftUI 提供了新 NameSpace...这意味着,在 ScrollView 中,子视图最好明确设定尺寸( 提出明确地需求尺寸 )。因此,在上面的代码中,需要通过屏幕高度和视图一高度差来计算上方空白站位视图高度。...有关转场动画更多内容,请参阅 SwiftUI 动画机制[8] 一文 八、Layout 协议 在 4.0 版本中,SwiftUI 增加了 Layout 协议,通过该协议,开发者可以针对特定场景,创建自定义布局容器

3.2K00

SwiftUI 方式进行布局

本文通过用多种手段完成同一需求方式,展示 SwiftUI 布局系统强大与灵活,并通过这些示例让开发者对 SwiftUI 布局逻辑有更多认识和理解。 可在 此处 获取本文代码。...有关这方面的内容,请参阅 SwiftUI 布局 —— 尺寸( 下 ) 一文中“面子和里子”章节。...有关建议尺寸、需求尺寸等内容,请参阅 SwiftUI 布局 —— 尺寸( 上 ) 一文 三、NameSpace 从 3.0 版本( iOS 15 )开始,SwiftUI 提供了新 NameSpace...这意味着,在 ScrollView 中,子视图最好明确设定尺寸( 提出明确地需求尺寸 )。因此,在上面的代码中,需要通过屏幕高度和视图一高度差来计算上方空白站位视图高度。...有关转场动画更多内容,请参阅 SwiftUI 动画机制 一文 八、Layout 协议 在 4.0 版本中,SwiftUI 增加了 Layout 协议,通过该协议,开发者可以针对特定场景,创建自定义布局容器

4.7K80

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

SwiftUI TextField 进阶 —— 事件、焦点、键盘 想获得更好阅读体验,可以访问我博客 www.fatbobman.com[1] 本文探讨涉及 SwiftUI TextField 事件...,通过 ToolbarItem 设置输入辅助视图目前还有以下不足: •显示内容受限高度固定,且无法利用辅助视图完整显示区域。...如果分别对不同 TextField 进行设定,SwiftUI 会将所有的内容合并起来显示。 目前 SwiftUI 对 toolbar 内容干预和处理有些过头。...在不同视图种类(例如 List、Form、ScrollView)中,或使用辅助视图、textContentType 情况下都可以避免遮挡正在输入 TextField。...如果抬升高度能再高一点或许效果会更好,现在略显局促。

13.1K10

HarmonyOS组件开发 ScrollView嵌套ListContainer 滑动冲突问题

二、这时第二个思路也成型了,因为ScrollView高度是根据它内部组件高度变化,当内部组件高度大于手机屏幕高度时会出现ScrollView滚动,反之不会出现。...那么就只能从ScrollView高度入手了,要改变ScrollView高度就必须去改变它内部组件高度,那么问题来了ScrollView嵌套ListContainer,ListContainer高度最大只能到屏幕大小或者是固定于屏幕内部...随即ListContainer高度如果大于了屏幕高度ScrollView就会滑动。 OK,问题找到了,解决ListContainer动态高度就解决滑动冲突。...这里就粘一下图 思路没有变,每次listviewItem高度相加作为listview整体高度,listview高度就是动态变化,listview高度会根据数据增加而变化。...= null && position >= 0 && position < list.size()){ return list.get(position); }

85320

解析 SwiftUI 中两处由状态更新滞后引发严重 Bug

但是,SwiftUI一些系统控件并没有完全遵循响应式设计原则,由此在某些情况下会出现严重错误,影响用户体验,并使开发者无所适从。...本文解析 SwiftUI 中两个由于未能贯彻响应式编程原则而导致严重错误,并提供相应解决方案。...而通过调用环境值或直接修改绑定状态,SwiftUI 则遵循了响应式编程原则,进行了先调整状态,后更新视图操作。...只有直接修改 path,SwiftUI 才能表现像一个真正响应式编程框架。...Back 按钮消失,但视图并没有返回根视图图片如果我告诉你,上述情况正是由前文提到状态更新滞后所导致,那么你该如何避免这个问题呢?

579110

如何在 SwiftUI 中创建条形图

前言 条形图以矩形条形式呈现数据类别,其宽度和高度与它们表示值成比例。本文展示如何创建一个垂直条形图,其中矩形高度代表每个类别的值。...系列文章 如何在 SwiftUI 中创建条形图 SwiftUI水平条形图 在 iOS 16 中用 SwiftUI Charts 创建一个折线图 在 iOS16 中用 SwiftUI 图表定制一个线图...很容易部分内容提取到子视图中,以便每个部分都很小且易于维护。从包含 BarChartView 以及可能其他文本或数据视图开始。...它需要每一条数据名称和值以及最大值和可用条形高度。每个条形图都表示为圆角矩形,条形高度相对于最大条形高度设置。条形颜色设置为纯蓝色。...SwiftUI 是一个很好平台,用于创建视图和快速重构独立子视图。在 SwiftUI 中构建条形图需要做一些工作,随着使用数据来试用条形图,可以确定更多定制化。

5.1K10

写了个自定义指令,支持elementUI2.0下拉框组件虚拟列表显示

, scrollView: null // 滚动容器 } } } } 从指令配置所需要参数来看,主要是以下几个关键字段: viewHeight可视区域高度...rowHeight当前行默认高度 startIndex数据起始位置 endIndex数据默认位置 callback执行回调,主要是控制下拉数据 scrollView监听滚动容器 然后我们看下指令是如何编写...1、找到内容滚动容器wrap,主要是通过componentInstance找到下拉滚动父容器 2、设置滚动容器内部高度scrollView【必须要设置】,不设置的话,内容数据无法滚动显示 let {...= data.length; // 所有数据总条数 // 设置el-scrollbar__view高度 scrollView.style.height = `${total * rowHeight}...就是为了回显我们上次选择内容区域 由于我们设置了内容高度,所以如果有设置过滤搜索,就会显示有问题,于是我们在过滤搜索时,就将高度置auto let { data, rowHeight, startIndex

2.1K20
领券