Using a "Plus" button that will add a new Picker field on the screen in Swift-CodePudding

First off, thanks for taking the time to look at this, you folks rock!

I am a teacher for the blind/visually impaired by day and have just started dabbling in code in order to create some neat tools to advance our profession.

The first app I am trying to build is an evaluation tool. I have been able to use Forms with Pickers and Toggles to accomplish this fairly successfully with a lot learning along the way.

The biggest problem I am having is when recording their current visual diagnosis. Most of our kids have multiple diagnosis so I needed a way for the user to add as many as they need for each kid. With the help of @aheze's reply in https://stackoverflow.com/a/69137065/18850386 and a little modifying, I have been able to create the Button I want using a ForEach statement but the selected Picker values are tied together. Here is my current code and picture.

Screenshot of current code preview

@State var eyeConditions = [""]
@State var eyeConditionsList = ""

var body: some View {
    NavigationView {
       Form {
           Section(header: Text("Active Eye Condition(s)")) {
                ForEach(eyeConditions.indices, id: \.self) { index in
                    Picker(
                        selection: $eyeConditionsList,
                        label: Text("Selected Condition:"),
                        content: {
                                Text("").tag("1")
                                Text("Amblyopia").tag("2")
                                Text("Aphakia").tag("3")
                                Text("Astigmatism").tag("4")
                                Text("Bulls Eye Maculopathy").tag("5")
                                Text("Cataract").tag("6")
                                Text("Coloboma").tag("7")
                                Text("Color Blindness").tag("8")
                                Text("Convergence Insufficiency").tag("9")
                                Text("Corneal Scarring").tag("10")
                    })
               }
               Button(action: {
                   eyeConditions.append("")
               }) {
                   Image(systemName: "plus.circle")
                       .foregroundColor(Color.blue)
               
               }
           }
       }
       .navigationBarTitle("Visual Information")
   }
}

My question is, how do I make it to where each newly created Picker value is not tied to each other and displays as separate values?

Thanks in advance, I truly appreciate your time and help!

CodePudding user response：

Declare eyeConditionsList also as array
```
@State var eyeConditionsList = [""]
```

In the button action append also an item to eyeConditionsList

Button(action: {
   eyeConditions.append("")
   eyeConditionsList.append("")

Bind selection to the appropriate index

Picker(
    selection: $eyeConditionsList[index]

But in practice you need only one @State property

@State var eyeConditions = [""]

var body: some View {
    NavigationView {
          Form {
              Section(header: Text("Active Eye Condition(s)")) {
                   ForEach(eyeConditions.indices, id: \.self) { index in
                       Picker(
                           selection: $eyeConditions[index],
                           label: Text("Selected Condition:"),
                           content: {
                                   Text("").tag("1")
                                   Text("Amblyopia").tag("2")
                                   Text("Aphakia").tag("3")
                                   Text("Astigmatism").tag("4")
                                   Text("Bulls Eye Maculopathy").tag("5")
                                   Text("Cataract").tag("6")
                                   Text("Coloboma").tag("7")
                                   Text("Color Blindness").tag("8")
                                   Text("Convergence Insufficiency").tag("9")
                                   Text("Corneal Scarring").tag("10")
                       })
                  }
                  Button(action: {
                      eyeConditions.append("")
                  }) {
                      Image(systemName: "plus.circle")
                          .foregroundColor(Color.blue)
                  
                  }
              }
          }