前提回忆

元国际，是运用数字技能建立的，由实际国际映射或超越实际国际，可与实际国际交互的虚拟国际，具备新式社会体系的数字生活空间。而本项目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仓库视图便躲藏了。

咱们点击单张身份卡片，在模拟器中能够看到跳转的作用，如下图所示：

界面设计：自定义回来按钮

来到HomePageView视图，和ContentView和NewView一样，咱们给这个页面创立顶部导航菜单，而导航栏的标题，咱们能够声明一个变量，将ContentView的渠道称号变量传值过来，如下代码所示：

struct HomePageView: View {
    var platformName: String
    var body: some View {
        NavigationStack {
            Text("HomePageView")
            .navigationBarTitle(platformName, displayMode: .inline)
        }
    }
}

声明变量后，咱们还要回到ContentView给运用到HomePageView中声明的变量绑定默认值，完成从ContentView视图传值到HomePageView视图中，如下代码所示：

HomePageView(platformName:item.platformName)

在HomePageView视图中，咱们看到因为运用NavigationLink跳转回来，因而在跳转后的页面会自带回来按钮。

但这个回来按钮没那么好看，咱们能够躲藏本来系统自带的回来按钮，然后自己自定义一个回来按钮并完成回来操作，如下代码所示：

struct HomePageView: View {
    var platformName: String
    @Environment(.presentationMode) var presentationMode
    var body: some View {
        NavigationStack {
            Text("HomePageView")
            .navigationBarTitle(platformName, displayMode: .inline)
            .navigationBarBackButtonHidden(true)
            .navigationBarItems(leading: backBtn())
        }
    }
    // 回来按钮
    func backBtn() -> some View {
        Button(action: {
            self.presentationMode.wrappedValue.dismiss()
        }) {
            Image(systemName: "chevron.backward")
                .font(.system(size: 17))
                .foregroundColor(.black)
        }
    }
}

上述代码中，咱们创立了一个回来按钮视图backBtn，并运用环境变量presentationMode完成其出栈回来上一页办法。

导航菜单部分，运用navigationBarBackButtonHidden躲藏导航菜单回来按钮修饰符躲藏NavigationLink自带的回来按钮，并运用navigationBarItems导航菜单按钮元素修饰符将backBtn回来按钮视图加到导航菜单上。

界面设计：在使用内翻开浏览器

接下来，咱们来学习在跳转到HomePageView页面的同时，翻开浏览器并拜访对应身份卡片的链接地址。

拜访网页需求引证一个新的结构— —WebKit，WebKit是一款开源的浏览器结构，运用WebKit能够完成在使用内拜访web网页地址的功用。

首要，咱们先引证这个结构，如下代码所示：

import WebKit

然后咱们完成下拜访网页的办法，如下代码所示：

// MARK: - 网页办法
struct SiteView: UIViewRepresentable, View {
    var indexURL: String
    func makeUIView(context: UIViewRepresentableContext<SiteView>) -> WKWebView {
        return WKWebView()
    }
    func updateUIView(_ uiView: WKWebView, context: UIViewRepresentableContext<SiteView>) {
        let request = URLRequest(url: URL(string: "https://"+indexURL)!)
        uiView.load(request)
    }
}

上述代码中，咱们创立了一个结构体SiteView，遵从UIViewRepresentable协议，UIViewRepresentable协议能够将视图增加到SwiftUI界面中，并在恰当的时刻调用可表示实例的办法以创立和更新视图。

在SiteView网页视图中，经过传入一个String类型链接地址indexURL，调用uiView的WKWebView结构，拜访并加载来自indexURL网站的数据，回来内容给到View视图中，完成拜访网站的功用。

创立完成后，咱们在HomePageView调用它，因为需求传入链接地址，因而在HomePageView中也要声明变量作为链接地址，且链接地址需求来自于ContentView身份卡片的地址，如下代码所示：

struct HomePageView: View {
    var platformName: String
    var indexURL: String
    @Environment(.presentationMode) var presentationMode
    var body: some View {
        NavigationStack {
            SiteView(indexURL: indexURL)
            .navigationBarTitle(platformName, displayMode: .inline)
            .navigationBarBackButtonHidden(true)
            .navigationBarItems(leading: backBtn())
        }
    }
    // 回来按钮
    func backBtn() -> some View {
        Button(action: {
            self.presentationMode.wrappedValue.dismiss()
        }) {
            Image(systemName: "chevron.backward")
                .font(.system(size: 17))
                .foregroundColor(.black)
        }
    }
}
struct HomePageView_Previews: PreviewProvider {
    static var previews: some View {
        HomePageView(platformName: "稀土技能社区", indexURL: "/user/3897092103223517")
    }
}

上述代码中，咱们声明了变量indexURL作为拜访的链接地址，并在HomePageView的body视图中运用SiteView网站视图，SiteView网站视图的拜访地址绑定声明的变量indexURL。

并且还需求在浏览器预览时增加默认值，便于模拟器预览作用，如下代码所示：

 HomePageView(platformName: "稀土技能社区", indexURL: "/user/3897092103223517")

因为HomePageView声明了变量indexURL，因而咱们还要回到ContentView中给HomePageView声明的变量赋值，如下代码所示：

HomePageView(platformName:item.platformName, indexURL: item.indexURL)

项目预览

完成后，咱们回到ContentView视图，在模拟器中预览下整体的作用，如下图所示：

项目小结

在本章中，咱们学习了根据NavigationStack顶部导航菜单的跳转办法NavigationLink，并完成了自定义回来按钮及其操作。在本章核心内容，咱们触摸了一个新的结构WebKit，经过运用UIViewRepresentableContext和View视图，完成在使用内拜访网页链接的功用。

电子名片本质上是一款短链接聚合东西，经过生成URL共享进行裂变，如此看来，Linkworld根本能够链接一切内容，如建立个人著作库，或许共享一切交际帐号集，亦或许管理自己的自媒体帐号等等，都能够经过Linkworld完成。

简单，但有趣。

版权声明

本文为稀土技能社区首发签约文章，14天内制止转载，14天后未获授权制止转载，侵权必究！