如何向 SwiftUI 表单添加更多行/项目？

Question

I'm a newbie coder and learning SwiftUI.

This image will show the problem I'm having:

When clicking the "Add Exercise" button, I'd like the rounded rectangle and contence to be repeated below.

I'm using Firebase's Cloud Firestore to store this data. How would the contence of the form be structured with the changing amounts of Exercises?

Thanks, here's my basic code for the form setup:

    var body: some View {
    ScrollView {
        VStack (alignment: .leading, spacing: 4) {
            Text("Injury Exercises")
                .font(.largeTitle)
                .bold()
        }.frame(maxWidth: .infinity, alignment: .leading)
        .padding()
        
        VStack (spacing: 16){
            
            TextField("Workout Title (optional)", text: $text)
                .autocapitalization(.words)
                .clipShape(RoundedRectangle(cornerRadius: 6, style: .continuous))
                .lineLimit(1)
            TextField("Add Warmup", text: $text)
                .font(.subheadline)
                .clipShape(RoundedRectangle(cornerRadius: 6, style: .continuous))
            
            VStack{
                TextField("Exercise Title (required)", text: $text)
                    .autocapitalization(.words)
                    .clipShape(RoundedRectangle(cornerRadius: 6, style: .continuous))
                    .lineLimit(1)
                
                TextField("Sets, Reps, Tempo, Rest etc.", text: $text)
                    .font(.subheadline)
                    .clipShape(RoundedRectangle(cornerRadius: 6, style: .continuous))
            }
            .padding(8)
            .foregroundColor(Color("card4"))
            .background(Color.white).opacity(0.8)
            .clipShape(RoundedRectangle(cornerRadius: 16, style: /*@START_MENU_TOKEN@*/.continuous/*@END_MENU_TOKEN@*/))
            
            HStack {
                Image(systemName: "plus")
                Text("Exercise")
            }
            .font(.subheadline)
            .padding(8)
            .foregroundColor(Color("card4"))
            .background(Color.white).opacity(0.8)
            .clipShape(Capsule())
            
            TextField("Add Cooldown", text: $text)
                .font(.subheadline)
                .clipShape(RoundedRectangle(cornerRadius: 6, style: .continuous))
            
        }
        .padding(.horizontal)
        .navigationBarTitle("Add Injury Exercise")
        .navigationBarHidden(true)
    }
    .background(
        VisualEffectBlur()
            .edgesIgnoringSafeArea(.all))
}
}

Answer 1

You could use a ForEach and an array of Exercises.
For instance, I'm gonna assume you have an Exercise model that contains something like the following:

struct Exercise: Identifiable, Hashable {
  var id: String
  var title: String
  var description: String
}

Your form component could contain the following (I removed the irrelevant parts):

struct Formmm: View {
    @State private var exercises: [Exercise]

    var body: some View {
        ScrollView {
            // snip

            ForEach(exercises.indices, id: \.self) { index in
                VStack{
                    TextField("Exercise Title (required)", text: $exercises[index].title)
                        .autocapitalization(.words)
                        .clipShape(RoundedRectangle(cornerRadius: 6, style: .continuous))
                        .lineLimit(1)

                    TextField("Sets, Reps, Tempo, Rest etc.", text: $exercises[index].description)
                        .font(.subheadline)
                        .clipShape(RoundedRectangle(cornerRadius: 6, style: .continuous))
                }
            }

            Button {
                exercises.append(Exercise(title: "", description: ""))
            } label: {
                HStack {
                    Image(systemName: "plus")
                    Text("Exercise")
                }
                .font(.subheadline)
                .padding(8)
                .foregroundColor(Color("card4"))
                .background(Color.white).opacity(0.8)
                .clipShape(Capsule())
            }

            // snip
        }
    }
}

Upon adding a new Exercise to your array, SwiftUI will redraw your component with the new line containing an empty Exercise . Because we use indexes, we are able to get a binding for the correct Exercise in our array.

Answer 2

To achieve the look and feel you showed in your screenshot, you can use a List with InsetGroupedListStyle :

Each of the sections can then be represented using a Section . As Section allows us to insert views into the header and footer, we can insert TextField s into the headers to allow the user to enter the workout title, etc. Likewise, the button for adding a new exercise can go into the footer .

Now, making the data model editable in-place is a bit more challenging, especially if you want to connect it to a backend service like Firebase. We need to convert our structs into ObservableObject s so we can bind the TextField s to them.

This is something I showed in my article series about MakeItSo .

For your app, this would look as follows:

The app

import SwiftUI

@main
struct SO65883241App: App {
  var viewModel = InjuryExercisesViewModel(exercises: sampleExercises)
  var body: some Scene {
    WindowGroup {
      InjuryExercisesScreen(viewModel: viewModel)
    }
  }
}

The Models

struct Exercise: Identifiable {
  var id = UUID().uuidString
  var title: String
  var details: String
}

let sampleExercises = [
  Exercise(title: "Deadlift", details: "1-3-2"),
  Exercise(title: "Squats", details: "3-3-2"),
  Exercise(title: "Push-ups", details: "20-10-10"),
]

The ViewModels

class InjuryExercisesViewModel: ObservableObject {
  @Published var title: String = ""
  @Published var warmUp: String = ""
  @Published var coolDown: String = ""

  @Published private var exercises = [Exercise]()
  @Published var exerciseViewModels = [ExerciseViewModel]()
  
  private var cancellables = Set<AnyCancellable>()
  
  init(exercises: [Exercise]) {
    $exercises.map { exercises in
      exercises.map { exercise in
        ExerciseViewModel(id: exercise.id, title: exercise.title, details: exercise.details)
      }
    }
    .assign(to: \.exerciseViewModels, on: self)
    .store(in: &cancellables)
    
    self.exercises = exercises
  }
  
  func addNewExercise() {
    exercises.append(Exercise(title: "", details: ""))
  }
}

class ExerciseViewModel: ObservableObject, Identifiable{
  var id: String
  @Published var title: String
  @Published var details: String
  
  init(id: String = UUID().uuidString, title: String, details: String) {
    self.id = id
    self.title = title
    self.details = details
  }
}

The views

import SwiftUI
import Combine


struct ExerciseRow: View {
  @ObservedObject var exerciseViewModel: ExerciseViewModel
  var body: some View {
    TextField("Exercise Title (required)", text: $exerciseViewModel.title)
    TextField("Sets, Reps, Tempo, Rest, etc.", text: $exerciseViewModel.details)
  }
}

struct InjuryExercisesScreen: View {
  @Environment(\.presentationMode) var presentationMode
  @StateObject var viewModel: InjuryExercisesViewModel
  
  var addExerciseButton: some View {
    HStack {
      Spacer()
      HStack {
        Image(systemName: "plus")
        Text("Exercise")
      }
      .onTapGesture { viewModel.addNewExercise() }
      .font(.headline)
      .padding(12)
      .foregroundColor(Color(UIColor.systemPurple))
      .background(Color(UIColor.secondarySystemGroupedBackground))
      .clipShape(Capsule())
      Spacer()
    }
    .padding()
  }
  
  func dismiss() {
    self.presentationMode.wrappedValue.dismiss()
  }
  
  func save() {
    dump(self.viewModel.exerciseViewModels[0])
    self.presentationMode.wrappedValue.dismiss()
  }
  
  var cancelButton: some View {
    Button(action: dismiss) {
      Text("Cancel")
    }
  }
  
  var doneButton: some View {
    Button(action: save) {
      Text("Done")
    }
  }
  
  var body: some View {
    NavigationView {
      List {
        Section(header: TextField("Workout Title (optional)", text: $viewModel.title)) {
        }
        Section(header: TextField("Add Warmup", text: $viewModel.warmUp)) {
        }
        Section(header: Text("Exercises"), footer: addExerciseButton) {
          ForEach(viewModel.exerciseViewModels) { exerciseViewModel in
            ExerciseRow(exerciseViewModel: exerciseViewModel)
          }
        }
        Section(header: TextField("Add Cooldown", text: $viewModel.coolDown)) {
        }
      }
      .listStyle(InsetGroupedListStyle())
      .navigationTitle("Injury Exercises")
      .navigationBarItems(leading: cancelButton, trailing: doneButton)
    }
  }
}

struct InjuryExercisesScreen_Previews: PreviewProvider {
  static var viewModel = InjuryExercisesViewModel(exercises: sampleExercises)
  static var previews: some View {
    Group {
      InjuryExercisesScreen(viewModel: viewModel)
        .preferredColorScheme(.dark)
      InjuryExercisesScreen(viewModel: viewModel)
        .preferredColorScheme(.light)
      Text("Parent View")
        .sheet(isPresented: .constant(true)) {
          InjuryExercisesScreen(viewModel: viewModel)
        }
    }
  }
}

How top store this in Firestore depends on your overall data model. Can you confirm that in your app, you're going to deal with a whole bunch of workouts?