CODEWITHSUNDEEP
buttonswiftui
Tobias Brenner
Tobias Brenner

Reputation: 55

SwiftUI: Button in Form

I am creating a Form in SwiftUi with a section that is including a flexible number of instruction.

Next to the last instruction TextField, I am showing a "+"-Button that is extending the instructions array with a new member:

var body: some View {
        NavigationView {
            Form {
                ...

                Section(header: Text("Instructions")) {
                    InstructionsSectionView(instructions: $recipeViewModel.recipe.instructions)
                } 
            ... 

struct InstructionsSectionView: View {
        @Binding var instructions: [String]
        var body: some View {
            ForEach(instructions.indices, id: \.self) { index in
                HStack {
                    TextField("Instruction", text: $instructions[index])
                    if(index == instructions.count-1) {
                        addInstructionButton
                    }
                }
            }
        }
        
        var addInstructionButton: some View {
            Button(action: {
                instructions.append("")
            }) {
                Image(systemName: "plus.circle.fill")
            }
        }
    }

Now the problem is, that the button click-area is not limited to the picture but to the whole last row. Precisely the part just around the textField, meaning if I click in it, I can edit the text, but if I click on the border somewhere, a new entry is added.

I assume that this is specific to Form {} (or also List{}), since it does not happen if I use a Button next to a text field in a "normal" set-up.

Is there something wrong with my code? Is this an expected behaviour?

Upvotes: 1

Views: 2101

Answers (1)

Tushar Sharma
Tushar Sharma

Reputation: 2882

I am not sure why border is getting tappable, but as a workaround I used plainButtonStyle and that seems to fix this issue, and keeps functionality intact .

struct TestView: View {
    @State private var endAmount: CGFloat = 0
    @State private var recipeViewModel = ["abc","Deef"]
    var body: some View {
        NavigationView {
            Form {
                Section(header: Text("Instructions")) {
                    InstructionsSectionView(instructions: $recipeViewModel)
                }
                
            }
        }
    }
}

struct InstructionsSectionView: View {
    @Binding var instructions: [String]
    var body: some View {
        ForEach(instructions.indices, id: \.self) { index in
            HStack {
                TextField("Instruction", text: $instructions[index])
                 Spacer()
                if(index == instructions.count-1) {
                   
                addInstructionButton
                    .buttonStyle(PlainButtonStyle())
                    .foregroundColor(.blue)
                }
            }
        }
    }
    
    var addInstructionButton: some View {
        Button(action: {
            instructions.append("")
        }) {
            Image(systemName: "plus.circle.fill")
               
        }
    }
}

Upvotes: 5

Related Questions