Button SwiftUI：表单中的按钮

我正在SwiftUi中创建一个表单，其中包含一个包含大量灵活指令的部分

在最后一个指令文本字段旁边，我显示了一个“+”按钮，该按钮使用一个新成员扩展指令数组：

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")
            }
        }
    }

现在的问题是，按钮单击区域不限于图片，而是整个最后一行。恰好是文本字段周围的部分，这意味着如果我在其中单击，我可以编辑文本，但是如果我在某个地方单击边框，就会添加一个新条目

我假设这是特定于表单{}（或列表{}）的，因为在“正常”设置中使用文本字段旁边的按钮不会发生这种情况

---

我的代码有问题吗？这是一种预期的行为吗？

我不知道为什么border会变得可点击，但作为一种解决方法，我使用了

plainButtonStyle

，这似乎解决了这个问题，并保持了功能完整

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")
               
        }
    }
}

---

非常感谢，这解决了问题。但奇怪的是，为什么在没有修饰符的情况下会发生这种情况。。。。