In order for you to have the ability to seize details about a number of levels then it’s worthwhile to use a group of cases.
The details about a single diploma will be factored out into an Identifiable
struct:
struct DegreeInfo: Identifiable {
let id = UUID()
var graduationType = ""
var specialisation = ""
var graduationUniversity = ""
var cityOfUniversity = ""
}
Then the a part of the view that permits this info to be edited will be factored out as a separate view:
struct DegreeInfoView: View {
let graduationTypes = ["Under Graduation", "Post Graduation", "Ph.D"]
@Binding var degreeInfo: DegreeInfo
var physique: some View {
VStack(alignment: .main) {
ZStack { // Create a ZStack for the part
RoundedRectangle(cornerRadius: 20) // Rounded rectangle with translucent border
.fill(Colour.white.opacity(0.1)) // Regulate opacity for translucency
.body(width: 365) // Permit horizontal enlargement
.body(top: 50 /* Regulate top based mostly on content material */)
Picker("Commencement Sort", choice: $degreeInfo.graduationType) { // Use Picker for dropdown
Textual content("Choose Commencement Sort").tag("Choose Commencement Sort")
ForEach(graduationTypes, id: .self) { kind in
Textual content(kind)
}
}
.pickerStyle(.menu)
}
// Specialisation
TextField("Diploma Specialisation", textual content: $degreeInfo.specialisation)
.foregroundStyle(.white)
.padding()
.background(Colour.white.opacity(0.2))
.cornerRadius(20)
// College of commencement
TextField("College of commencement", textual content: $degreeInfo.graduationUniversity)
.foregroundStyle(.white)
.padding()
.background(Colour.white.opacity(0.2))
.cornerRadius(20)
// Metropolis of College
TextField("Metropolis of College", textual content: $degreeInfo.cityOfUniversity)
.foregroundStyle(.white)
.padding()
.background(Colour.white.opacity(0.2))
.cornerRadius(20)
}
}
}
Now you simply have to handle the gathering of diploma information. An array can be utilized for this. The button appends a brand new occasion to the array:
struct AutoView: View {
@State personal var academicInfo = [DegreeInfo]()
var physique: some View {
ZStack { // Use ZStack to layer content material on high of the background
LinearGradient(gradient: Gradient(colours: [.mint, .gray]), startPoint: .topLeading, endPoint: .bottomTrailing)
.ignoresSafeArea() // Prolong gradient to whole display screen
ScrollView {
VStack(spacing: 20) { // Add spacing between parts
ForEach($academicInfo) { degreeInfo in
DegreeInfoView(degreeInfo: degreeInfo)
}
Button {
academicInfo.append(DegreeInfo())
} label: {
Textual content(academicInfo.isEmpty ? "Add your diploma(s)" : "Add extra diploma(s)")
.fontWeight(.daring)
.foregroundStyle(.yellow)
.padding()
.background(.blue.opacity(0.9))
.clipShape(RoundedRectangle(cornerRadius: 20))
}
}
.padding() // Add padding round content material
}
}
}
}