SwiftUI：表单中的按钮

Question

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

在最后一条指令 TextField 旁边，我显示了一个“+”按钮，它使用新成员扩展指令数组：

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

现在的问题是，按钮点击区域不仅限于图片，而是整个最后一行。恰好是 textField 周围的部分，这意味着如果我点击它，我可以编辑文本，但如果我点击某处的边框，则会添加一个新条目。

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

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

Answer 1

我不确定为什么边框变得可点击，但作为一种解决方法，我使用了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")
               
        }
    }
}