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

SwiftUI如何在新视图中链接ForEach索引和照片索引?

SwiftUI是一种用于构建用户界面的现代化框架,它提供了一种声明式的方式来创建应用程序。在SwiftUI中,可以使用ForEach视图来迭代集合,并在每次迭代中创建一个新的视图。

要在新视图中链接ForEach索引和照片索引,可以使用SwiftUI中的enumerated()方法。这个方法可以将集合的每个元素和对应的索引一起返回。下面是一个示例代码:

代码语言:txt
复制
struct ContentView: View {
    let photos = ["photo1", "photo2", "photo3"]
    
    var body: some View {
        VStack {
            ForEach(Array(photos.enumerated()), id: \.element) { index, photo in
                NavigationLink(destination: PhotoDetailView(photoIndex: index)) {
                    Image(photo)
                        .resizable()
                        .aspectRatio(contentMode: .fit)
                        .frame(width: 100, height: 100)
                }
            }
        }
    }
}

struct PhotoDetailView: View {
    let photoIndex: Int
    
    var body: some View {
        Text("Photo \(photoIndex + 1)")
            .font(.title)
    }
}

在上面的示例中,我们首先定义了一个包含照片名称的数组photos。然后,在ForEach视图中使用enumerated()方法将数组的每个元素和索引一起返回。在每次迭代中,我们创建一个NavigationLink,它将导航到PhotoDetailView视图,并将索引作为参数传递给PhotoDetailView。在PhotoDetailView中,我们可以使用传递的索引来显示对应的照片。

这是一个简单的示例,演示了如何在新视图中链接ForEach索引和照片索引。根据具体的需求,你可以根据这个示例进行修改和扩展。

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

相关·内容

onAppear 的调用时机

本文将通过 SwiftUI 4 提供的 API ,证明 onAppear 的调用时机是在布局之后、渲染之前。 问题 同之前多篇博客类似,我们还是从 聊天室 的一个 问题开始。...当视图的依赖( Source of truth )发生变化后,SwiftUI 会重新计算视图结果值,并与旧值进行比较。发生变化,则用值替换旧值。...判断视图正在求值 在视图中添加类似如下的代码,是我们判断 SwiftUI 是否正在对视图进行求值的常用手段: VStack { let _ = print("evaluate") } 判断视图正处于布局阶段...在不考虑使用绝对索引值是否正确的情况下,通过下面的代码,便可以避免问题的出现: if !...将正常处理所有的子视图 总结 在本文中,我们通过 SwiftUI 4 提供的新工具明确了 onAppear 的调用时机,或许这是 API 开发时未曾想到的功能应用。

1.1K10

onAppear 的调用时机

本文将通过 SwiftUI 4 提供的 API ,证明 onAppear 的调用时机是在布局之后、渲染之前。问题同之前多篇博客类似,我们还是从 聊天室 的一个 问题 开始。...图片请忽略例子中的写法是否合理值得推荐,仅考虑为什么在第一段代码中,出现了数组越界的情况;以及第二段代码可以正确运行。...当视图的依赖( Source of truth )发生变化后,SwiftUI 会重新计算视图结果值,并与旧值进行比较。发生变化,则用值替换旧值。...判断视图正在求值在视图中添加类似如下的代码,是我们判断 SwiftUI 是否正在对视图进行求值的常用手段:VStack { let _ = print("evaluate")}判断视图正处于布局阶段在...在不考虑使用绝对索引值是否正确的情况下,通过下面的代码,便可以避免问题的出现:if !

2K20

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

前言 苹果在 WWWDC 2022 上推出了 SwiftUI 图表,这使得在 SwiftUI图中创建图表变得异常简单。图表是以丰富的格式呈现可视化数据的一种很好的方式,而且易于理解。...此外,自定义图表的外观感觉以及使图表中的信息易于访问也是非常容易的。 如以前的文章所示,不使用 SwiftUI Charts 也可以创建一个折线图。...系列文章 如何在 SwiftUI 中创建条形图 SwiftUI 中的水平条形图 在 iOS16 中用 SwiftUI 图表定制一个线图 在 Swift 图表中使用 Foudation 库中的测量类型 简单折线图...这些可以通过将图表标记从LineMark改为其他类型的标记(BarMark)来生成条形图。...Charts 中创建一个包含两个系列步数数据的折线图 第一次尝试在 SwiftUI Charts 中创建一个包含两个系列步数数据的折线图 显示步数系列 在折线图中显示多个基于工作日的步数系列 最初尝试在折线图中显示多组数据的问题是

3.6K20

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

开始 首先看下主要内容: 在本教程中,您将了解如何在SwiftUICombine中使用VIPER体系结构模式,同时构建一个允许用户创建公路旅行的iOS应用程序,来自翻译。...添加一个变量到类: @Published var trips: [Trip] = [] 这是用户将在视图中看到的旅行列表。...Routing 在构建细节视图之前,您需要通过trip列表中的router将其链接到应用程序的其余部分。 创建一个名为TripListRouter.swift的Swift文件。...当您将其放置在NavigationView中时,该链接将成为一个按钮,将destination推送到导航堆栈上。 content块可以是任何一个SwiftUI视图。...您可以在trip detail视图中重新排列列表。但是要创建一个的waypoint,您需要一个视图,以便用户输入名称。 为了得到一个的视图,你需要一个Router。

17.4K10

Ask Apple 2022 中与 Core Data 有关的问答 (下)

详细内容请参阅 如何在 Core Data 中使用 Derived Transient 属性[4] 一文。...异步保存Q:嗨,将照片数据保存到 Core Data 时使用异步是否有必要?谢谢!A:你是在问是否应该使用 perform 或 performAndWait?...我也不确定 Category/Extension 的作用以及如何在 Class 之间进行选择?A:大多数人会使用 Class,并在他们自己的托管对象扩展中添加他们需要的任何自定义方法。...数据手动排序Q:在我的应用程序中,用户可以在表视图中通过拖放来重新排列项目。...为了管理有序的关系,Core Data 在 UInt16 空间中计算一个对象的索引,正好在前一个后一个对象的中间。当整数空间用完时,将在任何一个方向上跨出一个对象,并均匀地重新分配这些对象。

3.2K20

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

前言 List 可能是 SwiftUI 附带的内置视图中最常用的一种,它使我们能够在任何 Apple 平台上呈现“类似于表格视图”的用户界面。...使用速记语法 让我们从一个很小的特性开始,这是一个非常受欢迎的变化,可以使用类似 enum 的速记语法来引用 SwiftUI 附带的任何内置 ListStyle 类型。...为了演示这种情况,我们在 List 中嵌套一个 ForEach (因为在 SwiftUI 的中,列表变化一版都是由 ForEach 触发的,而不是由 List 触发的)。...由于每个 article 值在 ForEach 闭包中都是可变的,我们可以使用的 swipeActions 修饰符来实现每个 NavigationLink 项目视图的自定义滑动操作。...总结 SwiftUI 正在变得更加灵活强大,后面我将继续探索更多推出的 API,并在这里发布分享,欢迎持续关注,为了防止丢失,建议为本号设置星标。

4.8K41

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

Swiftcord[12] 的代码展示了如何在 SwiftUI 下实现倒置列表。阅读 优化在 SwiftUI List 中显示大数据集的响应效率[13] 一文,了解苹果工程师推荐的方法。...将背景扩展到安全区域Q:如果我有一个自定义的容器类型,可以接受一个顶部底部的视图,是否有办法让 API 的调用者将所提供的视图的背景扩展到安全区域内,同时将内容( 文本或按钮 )保留在安全区域内?...软弃用Q:最近,我注意到的 @ViewBuilder 函数在以前的版本中是不可用的,弃用信息提示我使用的方法取代老方法,这是 SwiftUI 的 API 设计缺陷还是我错过了什么?...macOS APIQ:对于运行 Monterey 的 Mac,能否如何在 SwiftUI 中实现下面需求的建议:打开一个窗口在该窗口中初始化数据找到所有打开的窗口确定一个窗口是否打开从不在该窗口的视图中关闭一个窗口...特别是,我们在 WindowGroup 上添加了的 OpenWindowAction 的初始化方法,这将同时满足 1 2 。

14.7K30

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

列表视图的初始化 body 求值 如果对 SwiftUI 的 NavigationView 有一定了解的话,应该知道 SwiftUI 会对 NavigationLink 的目标视图进行预实例化(但不会对...在 SwiftUI 中为视图设置显式标识目前有两种方式: 在 ForEach 的构造方法中指定 由于 ForEach 中的视图数量是动态的且是在运行时生成的,因此需要在 ForEach 的构造方法中指定可用来标识子视图的...另外如果 id 的标识值发生变化,SwiftUI 将丢弃原视图(生命周期终止及重置状态)并重新创建的视图。...虽然我们已经找到了导致进入列表视图卡顿的原因,但如何在不影响效率的情况下通过 scrollTo 来实现到列表端点的滚动呢?...除非没有其他选择,否则我并不推荐大家对 UIKit ( AppKit ) 控件进行重新包装,应使用尽可能微小的侵入方式对 SwiftUI 的原生控件进行补充完善。

9.1K20

只在视图 Body 中生存的变量

SwiftUI 通过调用视图实例的 body 属性来获取视图值。...相信不少开发者都会在视图中用下面的形式使用过 let: VStack { let _ = print("update") // 或 let = Self....但很少有人会在 body 中去使用 var 来定义变量,因为实在找不到使用 var 的理由意义。本文将探讨在 SwiftUI 的视图 body 中用 var 来创建变量的意义可能的场景。...场景一 前几天在 聊天室中有这个一个讨论: image-20230321195140004 由于 @FetchRequest 的返回类型 FetchedResults 并不支持索引,因此为了给每个对象添加一个序号...为什么想象的不一样!起始点不是 0 ? 同我们不要去推断在一个视图的存续期内,SwiftUI 会创建多少个该视图的实例一样,我们也不应假设,在渲染第一行数据之前,body 没有被调用过。

65210

WWDC 23 之后的 SwiftUI 有哪些新功能

前言 WWDC 23 已经到来,SwiftUI 框架中有很多改变新增的功能。在本文中将主要介绍 SwiftUI 中数据流、动画、ScrollView、搜索、新手势等功能的新变化。...数据流 Swift 5.9 引入了宏功能,成为 SwiftUI 数据流的核心。SwiftUI 不再使用 Combine,而是使用的 Observation 框架。...对于值类型(字符串整数)符合 Observable 协议的引用类型,只需使用 State 属性包装器。...EnvironmentValues 结构体包含了一系列与最新平台更新相关的属性,例如 isActivityFullscreen showsWidgetContainerBackground。...#Preview { ContentView() } 还有一个的 Preview 宏,可以让我们轻松地为 UIKit SwiftUI 构建预览,只需几行代码。

32420

何在Xcode下预览含有Core Data元素的SwiftUI视图

何在Xcode下预览含有Core Data元素的SwiftUI视图 从SwiftUI诞生之日起,预览(Canvas Preview )一直是个让开发者又爱又恨的功能。...结合两年来我在SwiftUI中使用Core Data的经验教训,我们将在本文中探讨: •导致SwiftUI预览崩溃的部分原因•如何在之后的开发中避免类似的崩溃出现•如何在Xcode中安全可靠地预览含有...在明确了预览是模拟器的概念后,很多在预览中出现的问题,就有了的解决思路。...SwiftUI提供的managedObjectContext环境值为在视图中使用或操作Core Data元素提供了基础便利。...由于前文中提到的SwiftUI App life cycle的独特性,你无法在根视图中使用单例来注入持久化上下文。

5.1K10

SwiftUI TextField进阶——格式与校验

SwiftUI TextField进阶——格式与校验 想获得更好的阅读体验,请访问我的博客 www.fatbobman.com[1] SwiftUI的TextField可能是开发者在应用程序中最常使用的文本录入组件了...但SwiftUI在封装中也屏蔽了不少的高级接口功能,增加了开发者实现某些特定需要的复杂性。...可能的屏蔽字符解决思路 •使用UITextFieldDelegate的textField方法•在SwiftUI的视图中,使用onChange在录入发生变化时进行判断并修改 第一种思路,仍需使用Introspect...由于onChange是在文字发生变化后才会调用,因此,方案二会导致视图二度刷新,不过考虑到文字录入的应用场景,性能损失可以忽略( 使用属性包装器进一步对数值同字符串进行链接,可能会进一步增加视图的刷新次数...不利于判断用户是否录入的信息(更多的信息可参阅如何在SwiftUI中创建一个实时响应的Form[10])。方案二中允许不提供初始值,支持可选值。

8.1K20

在 Text 中实现基于关键字的搜索定位

( 上面的代码使用了隐式 ForEach 形式 )中的 View 添加显式标识符后( 使用 id 修饰器),在视图刷新时,List 将会为 ForEach 中的所有视图创建实例( 并非渲染 )用以比对视图类型的构造参数是否发生变化...通过在 onChange 的闭包中将值与保存的旧值进行比对,可以实现上述目标。....为了达成这个目标,我们首先需要记录在 List 中,哪些 transcription 正在被显示,以及该 transcription 的索引。...尽管仅在搜索 TranscriptionRow 视图注入两处对性能做了部分优化,但最终的流畅度已基本满足需求,也从侧面证明了 SwiftUI 具备了相当的实战能力。.../posts/swiftUILifeCycle/[10] 在 SwiftUI图中打开 URL 的若干方法: https://www.fatbobman.com/posts/open_url_in_swiftUI

4.2K30

掌握 SwiftUI 的 Safe Area

SwiftUI 同时提供了一些方法工具让开发者对安全区域有所控制。 本文将探讨如何在 SwiftUI 中获取 SafeAreaInsets、将视图绘制到安全区域之外、修改视图的安全区域等内容。...对于视图层次上的其他视图,safeAreaInesets 只反映视图中被覆盖的部分。如果一个视图可以完整地放置在父视图的安全区域中,该视图的 safeAreaInsets 为 0。...也可以使用下面的代码,进一步了解 safeAreaInsets 在各个层级视图中的状况。...SafeAreaRegions 定义了三种安全区域划分: •container由设备用户界面内的容器所定义的安全区域,包括诸如顶部底部栏等元素。...•all(默认)上述两种安全区域划分的合集 iOS 13 并没有提供键盘自动避让功能,开发者需要编写一些额外的代码来解决软键盘不恰当遮盖视图( TextField )的问题。

7.5K31

Swift 周报 第三十二期

周报精选 新闻社区:苹果已提供的设计资源 提案:本期提案没有最新内容 Swift 论坛:讨论 Non-Reentrant Actors 推荐博文:AngularGradient 在 swiftUI...你可以在全新的 visionOS 模拟器中与你的 App 互动,探索各种房间布局光线条件,并创建测试可视化效果。此外,我们还提供了的文档示例代码,帮助你完成整个开发过程。...API,例如 “链接器集”(见下文)或自定义每种类型元数据, SE-0385 中所述(swift-evolution/proposals/0385-custom-reflection-metadata.md...可能会考虑尝试使用此方法扩展所有宏:SyntaxProtocol.expand(macros:in:) 推荐博文 AngularGradient 在swiftUI中的使用[9] 摘要: 本篇文章讲解了如何在...本文探讨了设置不同中心点以及指定渐变的起始角度结束角度范围的效果。AngularGradient 可用于在 SwiftUI图中创建引人注目的视觉效果,尤其是在圆形或弧形中使用时。

25030

何在SwiftUI中实现interactiveDismissDisabled

何在SwiftUI中实现interactiveDismissDisabled 想获得更好的阅读体验,可以访问我的博客www.fatbobman.com[1] 本文中我们将探讨如何实现一个SwiftUI...在今年推出的SwiftUI 3.0版本中,苹果添加了一个的View扩展:interactiveDismissDisabled,该扩展实现了上面的第一个要求——通过代码控制是否允许手势取消Sheet。...在WWDC 2021 观后感[6]一文中,我们已经探讨过SwiftUI3.0将会影响非常多的第三方开发者编写SwiftUI扩展的思路实现方式。...因此,只要将定义好的委托实例在视图中注入给特定的视图控制器即可实现以上需求。...通过学习理解原生的API,可以让我们的实现更加符合SwiftUI的风格,整体的代码更加的统一。 希望本文能够对你有所帮助。

3.8K40

SwiftUI 与 Core Data —— 数据定义

在今后的文章中我们将尝试用的思路来创建一个 SwiftUI + Core Data 的 app,看看能否避免并改善之前的一些问题。本文将首先探讨如何定义数据。...如此一来,开发者可以用自己熟悉的方式来操作数据而无需了解持久化数据的具体结构组织方式。...遗憾的是,托管对象对于以值类型为主的 SwiftUI 来说并不算友好,因此,不少开发者都会在视图中将托管对象实例转换成一个结构体实例以方便接下来的操作( 如何在 Xcode 下预览含有 Core Data...在不创建 Core Data 模型的情况下,完成绝大多数的视图逻辑代码。..._wrappedValue = wrappedValue }}现在,在 SwiftUI 的视图中,MockGroup 将具备与 C_Group 几乎一样的能力,唯一不同的是,它是通过一个 TodoGroup

2.4K40

Swift 周报 第十七期

新闻社区 11 月 14 日,参与一周的 Ask Apple 活动 欢迎继续参与一周激动人心的 Ask Apple 开发者系列活动,与 Apple 专家直接交流沟通。...iCloud 共享照片图库,可与最多五人顺畅地分享照片视频,鼓励大家一起制作家庭照片集,让回忆更丰富完整。...多种智能的共享方式,共享照片图库可以根据开始日期或照片中的人物,选取想要囊括的内容来进行设置。完成后,你可以手动分享,也可以看看边栏里的“为共享图库推荐”,根据它的智能建议将照片添加进来。...提案 SE-0377: 提出了的 borrow take 参数修饰符[4]。该提案已在十六期周报正在审查的提案模块做了详细介绍。...如何在 SwiftUI 中创建条形图 摘要: 本文将展示如何创建一个垂直条形图,其中矩形的高度将代表每个类别的值。

2K10
领券