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

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

2023-11-03 39

版权

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

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

界面设计：创建EditView编辑页面

完成单独的构件后，我们就可以来完成编辑页面的设计。创建一个新的SwiftUI文件，命名为EditView，如下图所示：

我们先搭建基础的样式，示例：顶部导航菜单、页面标题、关闭按钮等等，如下图所示：

import SwiftUI
struct EditView: View {
    @Environment(.presentationMode) var presentationMode
    var body: some View {
        NavigationStack {
            Text("Hello, World!")
                .navigationBarTitle("编辑身份卡", displayMode: .inline)
                .navigationBarItems(trailing: closeBtn())
        }
    }
    // 关闭按钮
    func closeBtn() -> some View {
        Button(action: {
            self.presentationMode.wrappedValue.dismiss()
        }) {
            Image(systemName: "xmark.circle.fill")
                .font(.system(size: 17))
                .foregroundColor(.gray)
        }
    }
}

上述代码中，我们基本和NewView页面的设计一样，使用NavigationStack搭建顶部导航菜单，并使用navigationBarTitle修饰符设置导航标题，使用navigationBarItems修饰符设置关闭页面按钮，并通过声明全局变量presentationMode和搭建单独的关闭按钮closeBtn来实现关闭编辑页面。

对于编辑保存按钮，样式和操作和NewView页面可能不一样，我们也单独构建按钮，如下代码所示：

// 编辑更新按钮
func updateBtn() -> some View {
    Button(action: {
        self.presentationMode.wrappedValue.dismiss()
    }) {
        Text("确定更新")
            .font(.system(size: 17))
            .foregroundColor(.white)
            .bold()
            .padding()
            .frame(maxWidth: .infinity)
            .background(Color.blue)
            .cornerRadius(8)
            .padding(.horizontal)
    }
}

完成后将编辑按钮updateBtn添加到EditView编辑页面视图中，如下代码所示：

VStack(spacing: 15) {
  updateBtn()
}

在引用构件之前，我们先来理解下数据关系。

EditView编辑页面和ContentView主页的数据关系是，用户在ContentView主页点击单张身份卡片，然后打开EditView编辑页面，并将ContentView主页身份卡片的数据传递到EditView编辑页面。

我们可以声明一个符合Model数据模型的参数，然后无论是TitleInputView、PlatformPicker、IndexURLView的参数都绑定Model数据模型的参数，然后该数据模型双向绑定到ContentView主页中，就可以将ContentView主页的数据传递过来，如下代码所示：

@State var model: Model

然后调用TitleInputView、PlatformPicker、IndexURLView构件，并且绑定model模型的值，如下代码所示：

VStack(spacing: 15) {
    TitleInputView(title: $model.title)
    PlatformPicker(platformIcon: $model.platformIcon, platformName: $model.platformName)
    IndexURLView(indexURL: $model.indexURL)
    updateBtn()
    Spacer()
}