界面设计：链接地址多行文本框
接下来我们来完成链接地址的交互设计，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([]))
