带导航的 SwiftUI 卡片视图（教程含源码）

在这个简单的教程中，我们将创建一个包含自定义“卡片”行的列表视图，点击该行时，将导航到详细视图。

该项目是在 Xcode 15 中编写的，使用 iOS 17 作为目标 SDK。

我喜欢摩托车并且是一名摩托车骑手，因此决定将此主题用于示例应用程序。下面是应用程序完成后的样子。

image.png

本教程是为您设计的，但是您可以从以下文章底部下载起始和最终示例代码以及应用程序中使用的数据（文本文件“摩托车图像属性”列出了此示例应用程序中使用的图像的属性）。

首先，我们需要在 Xcode 中创建一个新的 iOS 应用程序项目，并将其命名为 MotorcycleCardNavigation（或任何您喜欢的名称），并选择“SwiftUI”作为界面。

image.png

在开始之前，我们需要将图像导入 Xcode。