Building an Add Identity Card Page with SwiftUI

In the previous chapters we created a personal homepage and an identity‑card page, learning how to define data models, generate list‑based card views, and handle navigation. This section focuses on constructing the "Add Identity Card" screen.

The interface prioritises three pieces of information: the platform title (most important), followed by the platform icon and name, and finally the hidden link address.

We declare the required state variables with @State var platformIcon: String = "icon_juejin" @State var title: String = "移动端签约作者" @State var platformName: String = "稀土掘金技术社区" @State var indexURL: String = "https://juejin.cn/user/3897092103223517" , providing initial values for the UI.

The platform title input field is built with a TextField("请输入头衔", text: $title) wrapped in padding, a gray background, rounded corners, and horizontal spacing.

For platform selection we define a constant array let platforms = [("稀土掘金技术社区", "icon_juejin"), ("CSDN博客", "icon_csdn"), ("阿里云社区", "icon_aliyun"), ("华为云社区", "icon_huaweiyun")] . A four‑column LazyVGrid layout ( private var gridItemLayout = [GridItem(.flexible()), GridItem(.flexible()), GridItem(.flexible()), GridItem(.flexible())] ) displays the icons. The grid is placed inside a ScrollView with a fixed height, and each icon is shown as a circular image. Selection is tracked with @State var selectedItem = 0 ; the selected icon receives a green circular overlay, while tapping an unselected icon updates selectedItem and assigns platformIcon and platformName from the array.

The link address input uses a TextEditor inside a ZStack to provide a placeholder when the bound string indexURL is empty. The editor is styled with a gray background, rounded corners, and a maximum height.

An "Add" button is created with Button(action: { }) { Text("添加").font(.system(size: 17)).foregroundColor(.white).bold().padding().frame(maxWidth: .infinity).background(Color.green).cornerRadius(8).padding(.horizontal) } to trigger the addition of a new card.

All components are arranged vertically using a VStack(spacing: 15) that includes the title input, platform picker, link editor, add button, and a spacer.

Data binding is achieved by moving the models array from Model.swift into ContentView and passing it to NewView via @Binding var models: [Model] . When the add button is pressed, a new Model instance is created with the current state values and appended to models .

Finally, default values are cleared so users can input their own data, and the binding is wired up in ContentView to reflect changes in the personal homepage.