首页
学习
活动
专区
工具
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 中使用该选择器。

30120
  • SwiftUI 的动画机制

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

    14.8K40

    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

    SwiftU:在循环中创建视图

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

    2.2K20

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

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

    22821

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

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

    18633

    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..中,SwiftUI 出于效率的考虑,即使 Cell 视图移出显示范围,它的视图仍将保留在视图值树上(视图仍将存续)。...因此,当 Cell 视图出现在显示范围内(影响容器布局)会触发 onAppear,移出显示范围(不影响容器布局)会触发 onDisappar。在其存续期内可以反复触发。...,将完成依赖项的建立工作•在视图的生命周期中,只有一个依赖项副本•在视图的生命周期中,无论创建多少个实例,同一时间只有一个实例可以连接到依赖项•依赖项为视图的 Source of truth 了解 SwiftUI

    4.5K30

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

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

    9.3K20

    如何让 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 视图修饰符。

    23840

    SwiftUI 布局 —— 尺寸( 上 )

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

    4.8K20

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

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

    65300

    SwiftUI 中的内容边距

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

    19232
    领券