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

如何在SwiftUI中允许ForEach布局项显示来自数组的重复项?

在SwiftUI中,ForEach 视图通常用于遍历一个集合(如数组)并为每个元素生成一个视图。默认情况下,ForEach 会假设集合中的每个元素都是唯一的,并且不会显示重复项。但是,如果你希望允许 ForEach 显示来自数组的重复项,可以通过自定义标识符来实现。

以下是一个示例代码,展示了如何在 SwiftUI 中允许 ForEach 显示来自数组的重复项:

代码语言:txt
复制
import SwiftUI

struct ContentView: View {
    let items = ["Apple", "Banana", "Apple", "Orange", "Banana"]
    
    var body: some View {
        VStack {
            ForEach(items.indices, id: \.self) { index in
                Text(items[index])
                    .padding()
                    .background(Color.gray.opacity(0.2))
                    .cornerRadius(8)
            }
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

在这个示例中,我们使用了 items.indices 来遍历数组的索引,而不是直接遍历数组元素。通过这种方式,我们可以避免 ForEach 对元素的唯一性检查。

解释

  1. 数组定义
  2. 数组定义
  3. 这里定义了一个包含重复项的数组。
  4. ForEach 遍历
  5. ForEach 遍历
    • items.indices:遍历数组的索引。
    • id: \.self:使用索引作为标识符,这样 ForEach 就不会对元素的唯一性进行检查。

应用场景

这种技术适用于需要显示重复项的场景,例如:

  • 显示用户列表,其中可能有重名的用户。
  • 显示商品列表,其中某些商品可能有多个相同的条目。

参考链接

通过这种方式,你可以灵活地控制 ForEach 的行为,使其能够显示数组中的重复项。

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

相关·内容

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

,只提取你需要属性,并依靠 SwiftUI equality 检查来提前中止无效计算苹果工程师给出答案与 避免 SwiftUI 视图重复计算[5] 一文很多建议都一致。....}// 可以用类似字典方式对元素进行操作,快速定位,同时在更新 IdentifiedArray 时,也不容易引发 ForEach 异常todos[id:id] = newTodo自定义布局Q:在实现自定义布局时...但是,如果你只是自己使用它,并且条件可控,那么不处理这些情况也是合理。创建一个考虑到所有情况通用布局( 例如:VStack、HStack )是一相当艰巨工作。...Swiftcord[12] 代码展示了如何在 SwiftUI 下实现倒置列表。阅读 优化在 SwiftUI List 显示大数据集响应效率[13] 一文,了解苹果工程师推荐方法。...,但原因并非来自实际视图内容,而是由于 sheet、toolbar 等修饰器代码造成

14.8K30

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

所有符合该协议对象必须实现两个属性:displayedName(在选择器显示名称)和 isSelected(一个布尔值,指示特定选项是否已选择)。...,因此需要将所有 UIFont 权重转换为 SwiftUI 等效。...行宽减去结果是否大于0。...VStack 高度是根据两个值计算: 输入数据任何项目的高度(类似于宽度计算,通过使用 reduce 函数,总结与项目相关所有高度) 将显示在 VStack 行数 private func...然后,详细介绍了实现该选择器逻辑,包括如何处理选项布局、宽度和高度,以及如何处理用户与按钮交互。 最后,提供了一个简单视图实现,可以在 SwiftUI 中使用该选择器。

29720
  • onAppear 调用时机

    图片请忽略例子写法是否合理和值得推荐,仅考虑为什么在第一段代码,出现了数组越界情况;以及第二段代码可以正确运行。...创建实例、求值、布局、渲染在 SwiftUI ,一个视图在它生命周期中通常会经历四个阶段:创建实例视图树,处于可显示分支视图基本上都会经历一个阶段。...当视图依赖( Source of truth )发生变化后,SwiftUI 会重新计算视图结果值,并与旧值进行比较。发生变化,则用新值替换旧值。...布局在计算好当前需要显示视图所有的视图值后,SwiftUI 将进入到布局阶段。通过父视图向子视图提供建议尺寸,子视图返回需求尺寸这一过程,最终计算出完整布局结果。...4.0 版本SwiftUI 提供了 Layout 协议,允许我们创建自定义布局容器,通过创建符合该协议实例,我们便可以判断当前视图是否正处于布局阶段。

    2.1K20

    onAppear 调用时机

    image-20230328163706115 请忽略例子写法是否合理和值得推荐,仅考虑为什么在第一段代码,出现了数组越界情况;以及第二段代码可以正确运行。...创建实例、求值、布局、渲染 在 SwiftUI ,一个视图在它生命周期中通常会经历四个阶段: 创建实例 视图树,处于可显示分支视图基本上都会经历一个阶段。...布局 在计算好当前需要显示视图所有的视图值后,SwiftUI 将进入到布局阶段。通过父视图向子视图提供建议尺寸,子视图返回需求尺寸这一过程,最终计算出完整布局结果。...在 4.0 版本SwiftUI 提供了 Layout 协议,允许我们创建自定义布局容器,通过创建符合该协议实例,我们便可以判断当前视图是否正处于布局阶段。...重复上面的过程,此时 newWords 已经有值了,ForEach 将正常处理所有的子视图 总结 在本文中,我们通过 SwiftUI 4 提供新工具明确了 onAppear 调用时机,或许这是新

    1.1K10

    SwiftUI 动画机制

    witAnimation 允许我们为同一个可动画部件不同依赖设定不同时序曲线函数。..., value: V) 尚不支持对同一个可动画部件不同依赖关联不同时序曲线函数 除了可以关联种类不同时序曲线函数外,SwiftUI允许关联时序曲线函数拥有不同作用时长。..., value: V) 代码位置维度, withAnimation 会影响显示所有与该依赖关联视图,比如,很难用 withAnimation 实现代码一效果。...这意味着,当数组中出现了两个同样元素(点击添加按钮),SwiftUI 将无法正确识别我们意图 —— 究竟是想对那个元素(值相同意味着标识也相同)进行操作。...有关显性标识方面的内容可以参阅 优化在 SwiftUI List 显示大数据集响应效率[8] 一文 遗憾与展望 理论上,一旦你掌握了 SwiftUI 动画机制,就应该能轻松地驾驭代码,自由地控制动画

    14.8K40

    SwiftU:在循环中创建视图

    SwiftUI为此提供了一个专用视图类型,称为ForEach。这可以在数组和范围上循环,根据需要创建尽可能多视图。更妙是,ForEach不会像我们手动输入视图一样被10个视图限制所影响。...ForEach将为其循环每个运行一次闭包,并传入当前循环。例如,如果我们从0循环到100,它将传入0、1、2,依此类推。...ForEach在使用SwiftUIPicker视图时特别有用,它允许我们显示各种选项供用户选择。...4、Picker与selectedStudent有双向绑定,这意味着它将开始显示0选择,但是在用户滑动选择器时更新属性。 5、在ForEach,我们从0数到(但不包括)数组学生数。...6、我们为每个学生创建一个文本视图,显示该学生姓名。 我们将在未来研究使用ForEach其他方法,但这对于这个项目来说已经足够了。

    2.2K20

    SwiftUI 新容器视图 API 深度解析:轻松构建自定义布局

    通过在 Card 容器视图内嵌入不同视图,你可以在应用多个屏幕复用它。这是使用容器视图主要优势之一:你可以通过将共享功能封装在容器视图中,在应用不同地方重复使用它们。...访问子视图另一种新 API 允许我们通过索引访问子视图,而不是使用 ForEach 视图进行迭代。...我们还利用了 id 参数功能,允许我们使用 ForEach 视图与普通数据一起工作。...Magazine:一个自定义容器视图,允许你将第一个子视图设置为大图,其他子视图横向排列展示。类似于杂志布局。...运行这个Demo此代码展示了如何在 SwiftUI 构建自定义容器视图,灵活地将不同布局封装在容器,以便在应用多次复用这些布局模式。

    13011

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

    它设计得易于使用,允许你将其附加到具有滚动目标布局任何 ScrollView 上。让我们通过一个示例来探讨这个修饰符使用。...要了解有关 scrollTargetLayout 视图修饰符更多信息,请查看我文章《掌握 SwiftUI ScrollView:滚动几何》。...完整示例上面对视图修饰符有了初步了解,它设计得易于使用,允许你将其附加到具有滚动目标布局任何 ScrollView 上。让我们通过一个示例来探讨这个修饰符使用。...整个示例分为两个部分:一个是显示带有多个文本视图 ScrollView,另一个是显示一个视频播放器视图。...每个数字都显示在一个 Text 视图中,并有不同背景颜色。

    17221

    SwiftUI水平条形图

    SwiftUI水平条形图 水平条形图以矩形条形式呈现数据类别,其宽度与它们所代表数值成正比。本文展示了如何在垂直条形图基础上创建一个水平柱状图。 水平条形图不是简单垂直条形图旋转。...Bar Chart with multiple data sets in SwiftUI SwiftUI 水平条形图 将条形图转换为水平 水平条形图不仅仅是在垂直条形图上配置,有一些元素是可以重复使用...改变,以水平方式布局条形。...在水平条形图中,显示条形图上数值并隐藏X轴可以使图表更简洁。 显示和隐藏水平条形图上元素 结论 创建水平条形图SwiftUI代码与创建垂直条形图代码不同。...在创建垂直条形图时学到技术可以重复使用,但最好将水平条形图视为与垂直条形图不同图表。当我们深入到轴等组件时,可以看到两个图表轴线都是一样,但是它们标签和定位在x和y之间是换位

    4.8K20

    SwiftUI 视图生命周期研究

    当使用新实例时,SwiftUI 仍会将新实例同原有的依赖关联起来。 鉴于以上原因,注册视图依赖时机应该在初始化后,获得 body 结果之前。...即使 Cell 视图没有显示在屏幕,仍会触发 onAppear ScrollView { VStack { ForEach(0..<100) { i in Text...•在 List 和 LazyVStack SwiftUI 出于效率考虑,即使 Cell 视图移出显示范围,它视图仍将保留在视图值树上(视图仍将存续)。...因此,当 Cell 视图出现在显示范围内(影响容器布局)会触发 onAppear,移出显示范围(不影响容器布局)会触发 onDisappar。在其存续期内可以反复触发。...,将完成依赖建立工作•在视图生命周期中,只有一个依赖副本•在视图生命周期中,无论创建多少个实例,同一时间只有一个实例可以连接到依赖•依赖为视图 Source of truth 了解 SwiftUI

    4.4K30

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

    SwiftUI 视图生命周期研究[3] 一文,我对 List 如何对子视图显示进行优化做了一定介绍。...在 SwiftUI 为视图设置显式标识目前有两种方式: 在 ForEach 构造方法中指定 由于 ForEach 视图数量是动态且是在运行时生成,因此需要在 ForEach 构造方法中指定可用来标识子视图...当仅通过 ForEach 来指定显示标识时,List 会对这些视图显示进行优化,仅在需要显示时才会对其进行实例化。...升降序切换 对数据进行降序显示且仅允许使用者手工滚动列表。系统邮件、备忘录等应用均采用此种方式。...获取若干最新数据,将数据逆向添加入数组 在列表显示后率先移动到最底端(取消动画) 通过 refreshable 调用下一批数据,并继续逆向添加入数组 用类似的思路,还可以实现向下增量读取或者两端增量读取

    9.2K20

    如何让 SwiftUI 列表变得更加灵活

    为了演示这种情况,我们在 List 嵌套一个 ForEach (因为在 SwiftUI ,列表变化一版都是由 ForEach 触发,而不是由 List 触发)。...然后,让我们使用另一个新功能,集合元素绑定,让系统自动为我们 articles 数组每个元素创建一个可变绑定: struct ArticleList: View { @ObservedObject...SwiftUI 中使用,请查看昨天这篇文章[1],不要错过真正重要“在 Swift 认识 async/await[2]”WWDC 会议。...由于系统会自动检测知道 viewModel.reload() 何时调用完成,因此可以防止发生重复刷新操作,并且可以更具状态显示和隐藏相应 UI。...可定制分隔符 自从引入 SwiftUI 以来,开发者们有一个非常普遍要求,提供一个 API ,用于隐藏或以其他自定义实现列表每个 item 之间默认分隔符。

    4.9K41

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

    系列文章 如何在 SwiftUI 创建条形图 SwiftUI 水平条形图 在 iOS16 中用 SwiftUI 图表定制一个线图 在 Swift 图表中使用 Foudation 库测量类型 简单折线图...Charts 创建折线图显示每日步数 使用 SwiftUI Charts 创建折线图显示每日步数 其他图表 SwiftUI Charts 有许多可用图表选项。...Charts 创建一个包含两个系列步数数据折线图 第一次尝试在 SwiftUI Charts 创建一个包含两个系列步数数据折线图 显示步数系列 在折线图中显示多个基于工作日步数系列 最初尝试在折线图中显示多组数据问题是...另外,前景样式设置为基于stepCount数组周期。折线图使用 x 轴工作日来显示两周步数,以便在周之间进行比较。...图表带有两个系列步数数据折线图 SwiftUI 图表带有两个系列步数数据折线图 结论 在 SwiftUI Charts 还有很多东西可以探索。

    3.7K20

    Swift 周报 第四十一期

    如果它们只是在文档列出,即使只是在附录或脚注,我会感到更高兴。 请注意,在这种情况下,顺序也很重要。我需要知道完整布局,以便将其映射到寄存器等等。...这有点类似于我们如何在结果构建器创建本地常量,这些常量不会立即被它消耗。 这个想法将扩展 if、guard 和 while 条件列表。...掌握 SwiftUI ContentUnavailableView [10] 摘要: 这篇博客介绍了如何在 SwiftUI 掌握使用 ContentUnavailableView 类型。...SwiftUI visual effects[11] 摘要: 这篇博客介绍了 SwiftUI 在 WWDC2023 引入一种叫做 visualEffect 新视图修饰符。...visualEffect 允许我们通过访问特定视图布局信息来附加一组可动画视觉效果。 通过上述示例,我们可以看到定义了一个文本视图并附加了 visualEffect 视图修饰符。

    23140

    SwiftUI 布局 —— 尺寸( 上 )

    VStack、ZStack、List 等布局视图外,在 SwiftUI ,大量布局容器是以视图修饰器形式存在。...因此,为了简化文字,我们在文章中会将父视图与具备布局能力容器等同起来。 不过需要注意是,在 SwiftUI ,有一类视图是会在视图树上显示为父视图,但并不具备布局能力。...其中代表有 Group、ForEach 等。...这类视图主要作用有: 突破 ViewBuilder Block 数量限制 方便为一组视图统一设置 view modifier 有利于代码管理 其他特殊应用, ForEach 可支持动态数量子视图等...SwiftUI 尺寸 如上文中所示,在 SwiftUI 布局过程,在不同阶段、出于不同用途,尺寸这一概念是在不断地变化

    4.8K20

    SwiftUI 内容边距

    不幸是,我们在 SwiftUI 无法访问 readableContentGuide。...第二个参数是我们想要移动空间量。第三个参数是 ContentMarginPlacement 类型实例,它允许我们指定我们想要移动位置。...你可以在 Playground 运行此代码以查看结果。总结本文介绍了 SwiftUI 内容边距管理,通过对比安全区域概念,解释了内容边距重要性。...随后,通过介绍 UIKit readableContentGuide 布局指南以及 SwiftUI safeAreaPadding 视图修饰符,展示了在 iPad 上适配内容边距方法。...通过本文,读者可以更好地理解并掌握 SwiftUI 内容边距管理技巧。我正在参与2024腾讯技术创作特训营最新征文,快来和我瓜分大奖!

    17632

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

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

    19232

    四、HarmonyOS应用开发-ArkTS开发语言介绍

    let list: Array = [1, 2, 3]; 元组 元组类型允许表示一个已知元素数量和类型数组,各元素类型不必相同。...React示例 图1 React示例 以上代码描述了React如何在指定页面元素(id为id01div元素)改变相应字符串内容(从"Hello World!"...对于如下每一布局,两个元素为横向排列,选择Row布局 图3 Row布局 Row() { Image($r('app.media.ic_default')) ......,ArkTS提供了@Builder装饰器,来修饰一个函数,快速生成布局内容,从而可以避免重复UI描述内容。...图7 ForEach基本使用 ToDoItem这个自定义组件,每一个ToDoItem要显示文本参数content需要外部传入,参数传递使用花括号形式,用content接受数组内容item。

    55300
    领券