界面设计：链接地址多行文本框
接下来我们来完成链接地址的交互设计，TextEditor多行文本框控件和TextField输入框控件的使用方法类似，不同的是至今TextEditor多行文本框控件都没有提供placeholder提示文字的设置方法，只能由开发者自行实现。
不过没关系，实现多行文本框的方法及其提示文字的方法也很简单，如下代码所示：
// 链接地址 func indexURLView() -> some View { ZStack(alignment: .topLeading) { TextEditor(text: $indexURL) .font(.system(size: 17)) .padding(15) if indexURL.isEmpty { Text("请输入主页链接") .foregroundColor(Color(UIColor.placeholderText)) .padding(20) } } .background(Color(.systemGray6)) .cornerRadius(8) .padding() .frame(maxHeight: 240) }
上述代码中，我们创建了一个多行文本框视图indexURLView作为链接地址的输入框，在indexURLView视图中使用ZStack堆栈视图建立层级关系，当TextEditor输入框的绑定的内容indexURL为空时，则展示一个Text文本作为提示文字。
如此就实现了TextEditor多行文本框及其提示文字的交互。
交互设计：添加身份卡按钮及其方法
完成添加身份卡的页面元素后，我们来实现将输入的内容添加到“个人主页”的方法。
首先我们先创建基本的按钮，如下代码所示：
// 添加按钮 func addBtn() -> some View { Button(action: { }) { Text("添加") .font(.system(size: 17)) .foregroundColor(.white) .bold() .padding() .frame(maxWidth: .infinity) .background(Color.green) .cornerRadius(8) .padding(.horizontal) } }
回到NewView的Body部分，所有元素我们均以搭建完成，所有视图的排布我们可以使用VStack垂直布局容器进行排布，如下代码所示：
VStack(spacing: 15) { titleInputView() platformPicker() indexURLView() addBtn() Spacer() }
样式完成之后，我们来实现添加身份卡到个人主页的交互。
我们来到Model.swift数据模型文件，原来我们声明了models数组变量，我们需要将其剪切到ContentView文件中来，作为ContentView中的一部份，用于后面的数据双向绑定使用，如下图所示：
然后回到NewView文件中，声明用于双向绑定的数据模型，如下代码所示：
@Binding var models: [Model]
由于使用了@Binding进行双向绑定参数，因此NewView中不能存在private声明的变量，因此我们需要删除原来platforms数组和gridItemLayout网格布局的private，并且给NewView赋予默认值，如下代码所示：
NewView(models: .constant([]))
还需要回到ContentView文件，对使用NewView视图中声明的双向绑定的models进行绑定，如下图所示：
最后我们还需要回到NewView视图中，实现添加身份卡的方法，如下代码所示：
let newItem = Model(platformIcon: platformIcon, title: title, platformName: platformName, indexURL: indexURL) models.append(newItem)
上述代码中，我们在点击addBtn添加按钮时，实现添加身份卡的方法，首先先声明一个常量newItem存放符合Model数据模型的数据，并将数据模型的对应的值填充为我们在NewView声明的变量（由于采用一样的命名，因此就有了上面的效果），然后调用append的方法将符合数据模型的数据添加到models数组中。
此时我们就可以删除NewView中声明的变量的默认值，让用户自定定义填充，如下代码所示：
@State var title: String = "" @State var indexURL: String = ""
同时我们也可以删除在ContentView中models数组的默认值，让我们自己操作创建数据，如下代码所示：
@State var models:[Model] = []
整体预览
接下来，让我们在模拟器中操作电子名片App的全路径，如下图所示：
本章小结
在本章中，我们学习了如何搭建“添加身份卡”页面，包含输入框基础控件的使用，多行文本框基础控件的使用。
本章的核心内容是自定义选择器的创建，我们使用ScrollView滚动视图容器、LazyVGrid垂直网格容器搭建了选择器，并实现了单选的功能。最后我们通过双向绑定视图数组数据的方式，实现了添加身份卡到个人主页的方法。
在本章的例子中，其实可以运用到其他App案例中，最常见的示例：todo待办事项和note笔记。
下面的章节中，我们来继续学习点击身份卡片在App打开浏览器并访问链接地址的功能及其他相关操作，请保持期待吧～
