实战教程·元宇宙来了，准备好你的电子名片了吗？（四）（2）-阿里云开发者社区

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

2023-11-03 64

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

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

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

来到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)
        }
    }
}