Я новичок в Swift и учусь создавать простые страницы в приложениях. В рамках этого я пытаюсь сохранить информацию об образовании от пользователей в процессе регистрации. Поскольку у человека может быть несколько степеней и типов, я добавил к типам UG
, PG
и Ph.D
.
Ниже представлен вид:
struct AutoView: View {
@State private var showGraduationDetails = false
let graduationTypes = ["Under Graduation", "Post Graduation", "Ph.D"]
@State private var graduationType = "" // New state variable to store graduation type
@State private var specialisation = "" // New state variable to store graduation type
@State private var graduationUniversity = "" // New state variable to store graduation type
@State private var cityOfUniversity = "" // New state variable to store graduation type
var body: some View {
ZStack { // Use ZStack to layer content on top of the background
LinearGradient(gradient: Gradient(colors: [.mint, .gray]), startPoint: .topLeading, endPoint: .bottomTrailing)
.ignoresSafeArea() // Extend gradient to entire screen
ScrollView {
VStack(spacing: 20) { // Add spacing between elements
VStack {
// Graduation details (conditionally displayed)
if showGraduationDetails {
VStack(alignment: .leading) {
ZStack { // Create a ZStack for the section
RoundedRectangle(cornerRadius: 20) // Rounded rectangle with translucent border
.fill(Color.white.opacity(0.1)) // Adjust opacity for translucency
.frame(width: 365) // Allow horizontal expansion
.frame(height: 50 /* Adjust height based on content */)
Picker("Graduation Type", selection: $graduationType) { // Use Picker for dropdown
Text("Select Graduation Type").tag("Select Graduation Type")
ForEach(graduationTypes, id: \.self) { type in
Text(type)
}
}
.pickerStyle(.menu)
}
// Specialisation
TextField("Degree Specialisation", text: $specialisation)
.foregroundColor(.white)
.padding()
.background(Color.white.opacity(0.2))
.cornerRadius(20)
// University of graduation
TextField("University of graduation", text: $graduationUniversity)
.foregroundColor(.white)
.padding()
.background(Color.white.opacity(0.2))
.cornerRadius(20)
// City of University
TextField("City of University", text: $cityOfUniversity)
.foregroundColor(.white)
.padding()
.background(Color.white.opacity(0.2))
.cornerRadius(20)
}
}
}
Button(action: {
showGraduationDetails.toggle() // Toggle visibility on click
}) {
Text(showGraduationDetails ? "Add more degree(s)" : "Add your degree(s)")
.fontWeight(.bold)
.foregroundColor(.yellow)
}
.frame(width: 170, height: 20, alignment: .center)
.padding()
.background(Color(UIColor.systemBlue).opacity(0.9))
.cornerRadius(20)
}
.padding() // Add padding around content
}
}
}
}
Как это выглядит:
Нажав кнопку, я увидел текстовые поля, сгенерированные, как показано ниже.
Может ли кто-нибудь сообщить мне, есть ли способ создать тот же набор полей для добавления другого типа образования, нажав на ту же кнопку, по сути добавив n-количество сведений об образовании. Буду признателен за любую оказанную помощь.
Если вы хотите иметь возможность собирать информацию о нескольких степенях, вам нужно использовать коллекцию экземпляров.
Информацию об одной степени можно разложить в структуру Identifiable
:
struct DegreeInfo: Identifiable {
let id = UUID()
var graduationType = ""
var specialisation = ""
var graduationUniversity = ""
var cityOfUniversity = ""
}
Тогда часть представления, которая позволяет редактировать эту информацию, может быть выделена как отдельное представление:
struct DegreeInfoView: View {
let graduationTypes = ["Under Graduation", "Post Graduation", "Ph.D"]
@Binding var degreeInfo: DegreeInfo
var body: some View {
VStack(alignment: .leading) {
ZStack { // Create a ZStack for the section
RoundedRectangle(cornerRadius: 20) // Rounded rectangle with translucent border
.fill(Color.white.opacity(0.1)) // Adjust opacity for translucency
.frame(width: 365) // Allow horizontal expansion
.frame(height: 50 /* Adjust height based on content */)
Picker("Graduation Type", selection: $degreeInfo.graduationType) { // Use Picker for dropdown
Text("Select Graduation Type").tag("Select Graduation Type")
ForEach(graduationTypes, id: \.self) { type in
Text(type)
}
}
.pickerStyle(.menu)
}
// Specialisation
TextField("Degree Specialisation", text: $degreeInfo.specialisation)
.foregroundStyle(.white)
.padding()
.background(Color.white.opacity(0.2))
.cornerRadius(20)
// University of graduation
TextField("University of graduation", text: $degreeInfo.graduationUniversity)
.foregroundStyle(.white)
.padding()
.background(Color.white.opacity(0.2))
.cornerRadius(20)
// City of University
TextField("City of University", text: $degreeInfo.cityOfUniversity)
.foregroundStyle(.white)
.padding()
.background(Color.white.opacity(0.2))
.cornerRadius(20)
}
}
}
Теперь вам просто нужно управлять сбором информации о степени. Для этого можно использовать массив. Кнопка добавляет новый экземпляр в массив:
struct AutoView: View {
@State private var academicInfo = [DegreeInfo]()
var body: some View {
ZStack { // Use ZStack to layer content on top of the background
LinearGradient(gradient: Gradient(colors: [.mint, .gray]), startPoint: .topLeading, endPoint: .bottomTrailing)
.ignoresSafeArea() // Extend gradient to entire screen
ScrollView {
VStack(spacing: 20) { // Add spacing between elements
ForEach($academicInfo) { degreeInfo in
DegreeInfoView(degreeInfo: degreeInfo)
}
Button {
academicInfo.append(DegreeInfo())
} label: {
Text(academicInfo.isEmpty ? "Add your degree(s)" : "Add more degree(s)")
.fontWeight(.bold)
.foregroundStyle(.yellow)
.padding()
.background(.blue.opacity(0.9))
.clipShape(RoundedRectangle(cornerRadius: 20))
}
}
.padding() // Add padding around content
}
}
}
}
начните с моделирования источника данных. Мы рассматриваем массив [Градусов], тело вашего быстрого представления должно заполняться на основе массива. При каждом нажатии кнопки вы добавляете в массив пустую модель степени, которая должна отображать новый набор текстовых полей.