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

带有ForEach的SwiftUI列表在一个VStack中可用,但在另一个中不起作用

是因为ForEach需要在其父视图中使用一个可识别的集合来迭代。在SwiftUI中,VStack是一个容器视图,它不是一个可识别的集合,因此ForEach无法在其中正常工作。

要解决这个问题,可以将ForEach放置在一个可识别的集合上,例如Array或Range。以下是一个示例代码,演示了如何在两个VStack中使用ForEach:

代码语言:txt
复制
import SwiftUI

struct ContentView: View {
    let items = ["Item 1", "Item 2", "Item 3"]
    
    var body: some View {
        VStack {
            ForEach(items, id: \.self) { item in
                Text(item)
            }
        }
        
        VStack {
            ForEach(0..<items.count) { index in
                Text(items[index])
            }
        }
    }
}

在上面的示例中,我们创建了一个名为items的字符串数组,并在第一个VStack中使用ForEach来迭代数组中的每个元素。在第二个VStack中,我们使用ForEach和Range来迭代数组的索引,并通过索引访问数组中的元素。

对于SwiftUI中的列表,还可以使用List视图来替代VStack。List视图是一个可识别的集合,可以直接使用ForEach来迭代元素。以下是一个示例代码:

代码语言:txt
复制
import SwiftUI

struct ContentView: View {
    let items = ["Item 1", "Item 2", "Item 3"]
    
    var body: some View {
        List(items, id: \.self) { item in
            Text(item)
        }
    }
}

在上面的示例中,我们使用List视图来创建一个可滚动的列表,并使用ForEach来迭代数组中的每个元素。

腾讯云相关产品和产品介绍链接地址:

  • 腾讯云官网:https://cloud.tencent.com/
  • 云服务器(CVM):https://cloud.tencent.com/product/cvm
  • 云原生应用引擎(TKE):https://cloud.tencent.com/product/tke
  • 云数据库 MySQL 版(CMYSQL):https://cloud.tencent.com/product/cmysql
  • 云存储(COS):https://cloud.tencent.com/product/cos
  • 人工智能(AI):https://cloud.tencent.com/product/ai
  • 物联网(IoT):https://cloud.tencent.com/product/iotexplorer
  • 移动开发(移动推送、移动分析、移动测试):https://cloud.tencent.com/product/mobile
  • 区块链(BCS):https://cloud.tencent.com/product/bcs
  • 元宇宙(Metaverse):https://cloud.tencent.com/product/metaverse

请注意,以上链接仅供参考,具体产品选择应根据实际需求进行评估和决策。

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

相关·内容

使用 SwiftUI 创建一个灵活选择器

前言 最近,我正在开发一个 Dribbble 上找到设计 SwiftUI 实现时,我想到了一个点子,可以通过一些酷炫筛选器扩展该项目以缩小结果列表。...使用 UIKit 时,我总是将这种类型视图实现为具有特定 UICollectionViewFlowLayout UICollectionView。但在 SwiftUI 该如何实现呢?...如果满足条件,我们将当前项附加到 singleLineResult ,更新可用 HStack 行宽,并继续到下一个元素。...VStack 高度是根据两个值计算: 输入数据任何项目的高度(类似于宽度计算,通过使用 reduce 函数,总结与项目相关所有高度) 将显示 VStack 行数 private func...如果我们只插入另一个 ForEach 循环,我们将在视图适当功能性方面遇到问题,因为 ForEach 不是一种 View。

26820

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

本文将通过一个优化列表视图案例,展现在 SwiftUI 查找问题、解决问题思路,其中也会对 SwiftUI 视图显式标识、@FetchRequest 动态设置、List 运作机制等内容有所涉及...找寻问题原因 或许有人会认为,毕竟数据量较大,进入列表视图有一定延迟是正常。但即使 SwiftUI 效能并非十分优秀今天,我们仍然可以做到以更小的卡顿进入一个数倍于当面数据量列表视图。... SwiftUI 为视图设置显式标识目前有两种方式: ForEach 构造方法中指定 由于 ForEach 视图数量是动态且是在运行时生成,因此需要在 ForEach 构造方法中指定可用来标识子视图...in ... } 通过 id 修饰符指定 id 修饰符是另一个对视图进行显式标识方式。...生产中处理方式 本文为了演示 id 修饰符 ForEach 异常状况以及问题排查思路,创建了一个在生产环境几乎不可能使用范例。

9.1K20

iOS 16 中用 SwiftUI Charts 创建一个折线图

系列文章 如何在 SwiftUI 创建条形图 SwiftUI 水平条形图 iOS16 中用 SwiftUI 图表定制一个线图 Swift 图表中使用 Foudation 库测量类型 简单折线图...,为步数数据每个元素创建一个带有LineMark图表。...SwiftUI Charts 创建一个包含两个系列步数数据折线图 第一次尝试 SwiftUI Charts 创建一个包含两个系列步数数据折线图 显示步数系列 折线图中显示多个基于工作日步数系列...StepCount添加另一个计算属性,以便以字符串格式返回工作日短日。...图表带有两个系列步数数据折线图 SwiftUI 图表带有两个系列步数数据折线图 结论 SwiftUI Charts 还有很多东西可以探索。

3.6K20

SwiftUI 作用域动画

前言从一开始,动画就是 SwiftUI 最强大功能之一。你可以 SwiftUI 快速构建流畅动画。...简单示例让我们从一个简单示例开始,展示我们旧方法一些缺点,这些方法用于 SwiftUI 驱动动画。...动画视图修饰符我们可以通过使用动画视图修饰符另一个版本来消除意外动画,在这个版本,我们可以绑定到特定值,并且仅在值更改时进行动画处理。...总结这篇文章介绍了SwiftUI构建动画新方法,重点解决了多步动画或特定视图层次结构控制动画挑战。...最后,介绍了 SwiftUI 构建有作用域事务新方法,以维护更具精确性和可控性动画。这些新功能在最新平台上可用,为SwiftUI开发者提供了更强大动画工具。

11610

深入了解 SwiftUI 5 ScrollView 新功能

SwiftUI 5.0 ,苹果大幅强化了 ScrollView 功能。新增了大量新颖、完善 API。本文将对这些新功能进行介绍,希望能够让它们更多、更早帮助到有需要开发者。...将可滚动容器内所有子视图视为一个整体,并为其添加 margin。之前 List 或 TextEditor 实现类似操作是十分困难。...可采用 优化 SwiftUI List 显示大数据集响应效率[5] 一文中介绍方式来解决。 scrollPostion(id:) 使用此修饰符可以让滚动视图滚动到特定位置。...(视图标识) 不支持锚点设定,固定锚点为子视图 center 正如 优化 SwiftUI List 显示大数据集响应效率[6] 一文所提到,当数据集很大时,也会出现性能问题。...总结 我完全没有想到, SwiftUI 5 ,苹果对 ScrollView 进行了全面增强。值得赞赏是,他们不仅提供了一些一直期待功能,而且 API 设计和实现完成度上都非常出色。

74720

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

我采用了常见解决方案,即旋转滚动视图和里面的每个单元格,以获得预期倒置列表 iOS 上,这很有效。但在 macOS 上,它使 CPU 使用率保持 100%。...Swiftcord[12] 代码展示了如何在 SwiftUI 下实现倒置列表。阅读 优化 SwiftUI List 显示大数据集响应效率[13] 一文,了解苹果工程师推荐方法。... SwiftUI 4 ,可以使用 .scrollContentBackground(.hidden) 隐藏列表默认背景searchableQ:是否有办法.searchable() 修饰器以编程方式设置搜索字段焦点...软弃用Q:最近,我注意到新 @ViewBuilder 函数以前版本是不可用,弃用信息提示我使用新方法取代老方法,这是 SwiftUI API 设计缺陷还是我错过了什么?...连锁动画Q: SwiftUI ,如何实现连锁动画?例如,我想先给一个视图做动画,当动画完成后立即启动另一个动画。A:不幸是,目前不可能实现连锁动画。

14.8K30

iOS16 中用 SwiftUI 图表定制一个线图

iOS 16 引入 SwiftUI 图表,可以以直观视觉格式呈现数据,并且可以使用 SwiftUI 图表快速创建。本文演示了几种定制折线图并与区域图结合来展示数据方法。...系列文章 如何在 SwiftUI 创建条形图 SwiftUI 水平条形图 iOS 16 中用 SwiftUI Charts 创建一个折线图 iOS16 中用 SwiftUI 图表定制一个线图... Swift 图表中使用 Foudation 库测量类型 默认折线图 从 iOS 16 中用 SwiftUI Charts 创建一个折线图中使用 SwiftUI Charts[1]创建默认折线图开始...步骤数据中使用了两种不同风格,以区分前一周数据和当前数据。此外,还为图表上数据点设置了一个自定义符号。...图表一个数据集设置自定义线型 结合面积图和折线图 最后,将折线图与面积图结合起来,帮助区分一个数据集与另一个数据集。

2.6K20

iOS16SwiftUI图表定制一个线图

iOS16SwiftUI图表定制一个线图 iOS 16引入SwiftUI图表,可以以直观视觉格式呈现数据,并且可以使用SwiftUI图表快速创建。...本文演示了几种定制折线图并与区域图结合来展示数据方法。 默认折线图 从iOS 16SwiftUI Charts创建一个折线图中使用SwiftUI Charts创建默认折线图开始。...步骤数据中使用了两种不同风格,以区分前一周数据和当前数据。此外,还为图表上数据点设置了一个自定义符号。...图表一个数据集设置自定义线型 结合面积图和折线图 最后,将折线图与面积图结合起来,帮助区分一个数据集与另一个数据集。...iOS16SwiftUI图表定制一个线图 https://swdevnotes.com/swift/2022/customise-a-line-chart-with-swiftui-charts-in-ios

2K20

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

本例,主要entity是Trip,它包含一个路点Waypoints列表,路点是旅程各个站点。 这个应用程序包含一个DataModel类,它包含一个旅行列表。...最后,TripListViewForEach结束括号后面添加以下内容: .onDelete(perform: presenter.deleteTrip) 将. ondelete添加到SwiftUI...router处理从一个屏幕到另一个屏幕转换,设置下一个视图所需类。 命令式UI范例——换句话说,UIKit——路由router将负责显示视图控制器或激活segue。...但在本例,TripListView将提供一个TripListCell。...使用presenter向列表添加新路径点add按钮。 一个列表List,它使用ForEach与presenter为每个路点创建一个单元格。

17.4K10

SwiftUI 之 HStack 和 VStack 切换

举个例子,假如我们正在构建一个 app 其中包含 LoginActionsView ,一个让用户登录时列表中选择操作类: struct LoginActionsView: View { .....然而,就像上面的代码展示那样,使用 GeometeryReader 来展示动态切换有一个相当明显缺点,几何图形阅读器总是会填充水平和垂直方向所有可用空间(以便测量实际空间)。...为了观察当前水平方向尺寸,我们需要用到 SwiftUI 环境系统 — 通过 DynamicStack 声明 @Environment - 标记属性(带有 horizontalSizeClass...Xcode 14 一部分仍在测试阶段) 其中一个工具是新 Layout 协议,它既能让我们创建完整自定义布局,直接集成到 SwiftUI 布局系统,同时也提供给我们一种更丝滑更动画方式各种布局之间动态切换...就像字面意思一样,这种新容器将会在我们初始化时传递候选列表,基于当前上下文挑选出最优视图。

2.8K10

SwiftUI 动画机制

SwiftUI 采用了声明式语法来描述不同状态下 UI 呈现,动画亦是如此。官方文档将 SwiftUI 动画(Animations)定义为:创建从一个状态到另一个状态平滑过渡。... SwiftUI ,我们不能命令某个视图从一个位置移动到另一个位置,为了实现上述效果,我们需要声明该视图状态 A 时所处位置以及状态 B 时所处位置,当由状态由 A 转到 B 时,SwiftUI... SwiftUI ,实现一个动画需要以下三个要素: 一个时序曲线算法函数 将状态(特定依赖项)同该时序曲线函数相关联声明 一个依赖于该状态(特定依赖项)可动画部件 animationThreeElements...状态、视图标识、动画 既然 SwiftUI 动画是创建从一个状态到另一个状态平滑过渡,那么我们必须对状态(依赖项)改变可能导致结果有正确认识。...ViewBuilder 研究(下) —— 从模仿中学习[7] 显式标识 SwiftUI ,为视图设置显式识别有两种方式:ForEach 和 id 修饰符。

14.7K40

SwiftUI 与 Core Data —— 安全地响应数据

例如,当你创建一个带有字符串属性新对象时,初始值( 没有默认值情况下 )是 nil,这在对象被验证之前( 通常在 save 时 )是没有问题。...例如下面的 count 属性( Integer 16 )模型编辑器中被设定为可选,但在生成代码仍将为非可选值类型( Int16 )。...从另一个角度来看,即使托管上下文中使用 delete 方法删除该实例在数据库对应数据,但如果该托管对象实例仍被代码或视图所引用,Swift 并不会销毁该实例,此时,托管对象上下文会将该实例 managedObjectContext..., formatter: itemFormatter)")因此 ContentView ForEach ,item 并不会被视为一个可以引发视图更新 Source of truth ( 通过...List { ForEach(items) { item in VStack { Text("\(item.timestamp ??

3.3K20

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

本文将介绍几种 SwiftUI 获取当前滚动状态方法,每种方法都有各自优势和局限性。...目前 SwiftUI 在内部实现上去 UIKit( AppKit )化很明显,比如,本节介绍方法 SwiftUI 4.0 已经失效方法二:Runloop我第一次接触 Runloop 是在学习 Combine...iOS 系统 macOS 下 eventTracking 模式,该方案表现并不理想屏幕只能有一个可滚动控件由于任意可滚动控件滚动时,都会导致主线程 Runloop 切换至 tracing...判断准确度没有前两种方式高当可滚动组件内容出现了非滚动引起尺寸或位置变化( 例如 List 某个视图尺寸发生了动态变化 ),本方式会误判断为发生了滚动,但在视图变化结束后,状态会马上恢复到滚动结束滚动开始后...每周也会对当周博客上新文章以及 Twitter 上发布 Tips 进行汇总,并通过邮件列表形式发送给订阅者。订阅下方 邮件列表[9],可以及时获得每周 Tips 汇总。

3.7K40

使用 SwiftUI 为 macOS 创建类似于 App Store Connect 选择器

前言最近,我一直在为我应用开发一个全新界面,它可以让你查看 TestFlight 上所有可用构建,并允许你将它们添加到测试群组。...创建选择器组件让我们分析一下,我们有一组想要在 SwiftUI 列表显示构建。每个构建都包含一组属性,其中之一是 betaGroups,它是一个表示构建所属测试群组结构体数组。...使用 .overlay 修改器在用户悬停在测试群组组件上时显示一个移除按钮。该按钮从构建所属测试群组列表移除测试群组。...以上代码片段使用了 BetaGroup 结构体上一个名为 displayName 属性来显示测试群组名称,类似于 App Store Connect 显示方式,显示名称前两个单词首字母大写...作者应用程序添加了一个界面,允许用户查看 TestFlight 上所有可用构建,并将它们添加到测试群组

13332

如何在 SwiftUI 创建条形图

系列文章 如何在 SwiftUI 创建条形图 SwiftUI 水平条形图 iOS 16 中用 SwiftUI Charts 创建一个折线图 iOS16 中用 SwiftUI 图表定制一个线图... Swift 图表中使用 Foudation 库测量类型 开始图表布局 SwiftUI 对探索不同布局和预览实时视图结果是很友好。...以下列表数据被作为主视图项目数据,每一条数据包含一个对(名称,值)。真正 app 里,这里数据应该通过 ViewModel 从 model 里取数据。...BarChartView 需要一个 DataItem 列表。...SwiftUI一个很好平台,用于创建视图和快速重构独立子视图。 SwiftUI 构建条形图需要做一些工作,随着使用数据来试用条形图,可以确定更多定制化。

5.1K10

SwiftUI水平条形图

SwiftUI水平条形图 水平条形图以矩形条形式呈现数据类别,其宽度与它们所代表数值成正比。本文展示了如何在垂直条形图基础上创建一个水平柱状图。 水平条形图不是简单垂直条形图旋转。...Numbers 等应用程序,水平条形图被定义为独立图表类型,而不是垂直条形图。除了条形差异外,x轴和y轴格式也需要不同。...Bar Chart with multiple data sets in SwiftUI SwiftUI 水平条形图 将条形图转换为水平 水平条形图不仅仅是垂直条形图上配置,有一些元素是可以重复使用...} } } } } } ChartAreaHView与ChartAreaView几乎相同,只是Bars被放置一个垂直堆栈...创建垂直条形图时学到技术可以重复使用,但最好将水平条形图视为与垂直条形图不同图表。当我们深入到轴等组件时,可以看到两个图表轴线都是一样,但是它们标签和定位在x和y之间是换位

4.8K20

SwiftUI 方式进行布局

需求 不久前, 聊天室[3] ,有网友提出了这样一个布局需求: 有两个竖向排列视图。...padding-offset 二、AlignmentGuide SwiftUI ,开发者可以使用 alignmentGuide 修饰器来修改视图某个对齐指南值( 设置显式值 )。...我们一个 overlay 绘制了一个与视图二尺寸一致视图( 不显示 ),并将其底边与屏幕底边对齐。...五、LayoutPriority SwiftUI ,设置视图优先级( 使用 layoutPriority )是一个好用但并不常用功能。...有关转场动画更多内容,请参阅 SwiftUI 动画机制[8] 一文 八、Layout 协议 4.0 版本SwiftUI 增加了 Layout 协议,通过该协议,开发者可以针对特定场景,创建自定义布局容器

3.2K00

掌握 ViewThatFits

iOS 16 SwiftUI 增加了一个自适应布局容器 ViewThatFits。正如其名称所示,它作用是在给定多个视图中找出最合适视图并使用。...通常这个顺序是从最大到最小,但由于一个视图可能在一个受限轴上适应但在另一个轴上不适应,所以这并不总是如此。默认情况下,ViewThatFits 水平和垂直轴上都进行约束。...一个 ViewThatFits 最终会选择那个子视图,取决于以下几个因素: ViewThatFits 可用空间(它父视图给它建议尺寸) ViewThatFits 设定受限轴 子视图受限轴上理想尺寸...SwiftUI 提供了两个版本 fixedSize ,我们当前使用版本要求视图水平和垂直两个轴向上都使用理想尺寸,而另一个版本允许我们对单个轴向进行限定。... SwiftUI ,我们可以通过 frame 来修改视图在理想状态下呈现。

17810
领券