界面设计：创建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() }
