实战教程·元宇宙来了，准备好你的电子名片了吗？（四）

前提回顾

元宇宙，是运用数字技术搭建的，由现实世界映射或超越现实世界，可与现实世界交互的虚拟世界，具备新型社会体系的数字生活空间。而本项目Linkworld是将虚拟世界或现实生活中的各种“身份”汇集起来，搭建一套数字身份体系。

在上几个章节中，我们学习了搭建个人主页页面和添加身份卡页面，并完成了基本的添加身份卡的交互。在本章中，我们将继续完善电子名片很重要的一项交互— —点击跳转身份卡主页。

交互动作：点击跳转身份卡主页

电子名片所承载的内容是将用户社交媒体信息以及用户分享的其他信息汇集起来，并且可以通过点击身份卡片进行访问，达到一个链接（即电子名片本体）就可以对个人进行营销。

为达到在应用内打开浏览器并访问身份卡主页的效果，我们需要创建一个页面作为跳转的页面。

新建一个新的SwiftUI文件，命名为HomePageView。HomePageView文件将作为我们跳转后访问的主页，如下图所示：

创建完成后，我们先来完善下页面之间的跳转逻辑，从ContentView页面跳转到HomePageView页面，我们可以使用基于

NavigationStack顶部导航菜单的跳转方法NavigationLink。

由于用户的交互动作是点击单张卡片进行跳转，因此跳转方法需要针对于单个CardView身份卡片视图，如下代码所示：

NavigationLink(destination: HomePageView()) {
    CardView(platformIcon: item.platformIcon, title: item.title, platformName: item.platformName, indexURL: item.indexURL)
}

上述代码中，我们使用NavigationLink导航跳转方法进行页面跳转，目标页面为HomePageView，跳转的主体点击内容为CardView身份卡片。

完成后我们发现List自带了跳转页面的指示箭头，由于NavigationLink导航菜单跳转直到iOS16版本都没有修饰符可以隐藏指示箭头，因此需要开发者自行实现隐藏指示箭头的样式，这点直到iOS16版本还未有专有的修饰符代替。

隐藏跳转指示箭头的方法也很简单，可以使用ZStack堆栈视图容器和opacity透明度修饰符实现隐藏效果，如下代码所示：

ZStack(alignment: .leading) {
    NavigationLink(destination: HomePageView()) {
        EmptyView()
    }
    .opacity(0)
    CardView(platformIcon: item.platformIcon, title: item.title, platformName: item.platformName, indexURL: item.indexURL)
}

上述代码中，我们使用ZStack堆栈视图并设置内容元素对齐方式为左对齐，在ZStack堆栈视图中，NavigationLink导航菜单跳转内容为一个空视图EmptyView，并设置整个NavigationLink导航菜单为完全透明。

如上修改后，当前展示的视图还是CardView的内容，而交互的视图使用ZStack堆栈视图便隐藏了。

我们点击单张身份卡片，在模拟器中可以看到跳转的效果，如下图所示：