Как создать VStack, содержащий коллекцию текстовых полей при нажатии кнопки в Swift iOS?

Я новичок в 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-количество сведений об образовании. Буду признателен за любую оказанную помощь.

начните с моделирования источника данных. Мы рассматриваем массив [Градусов], тело вашего быстрого представления должно заполняться на основе массива. При каждом нажатии кнопки вы добавляете в массив пустую модель степени, которая должна отображать новый набор текстовых полей.

Teja Nandamuri 30.06.2024 11:29
Стоит ли изучать PHP в 2023-2024 годах?
Стоит ли изучать PHP в 2023-2024 годах?
Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Приемы CSS-макетирования - floats и Flexbox
Приемы CSS-макетирования - floats и Flexbox
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...
Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Пользовательский скаляр GraphQL
Пользовательский скаляр GraphQL
Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип...
1
1
51
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Если вы хотите иметь возможность собирать информацию о нескольких степенях, вам нужно использовать коллекцию экземпляров.

Информацию об одной степени можно разложить в структуру 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
            }
        }
    }
}

Другие вопросы по теме

Похожие вопросы