SwiftUI：表单中的按钮

Posted 2023-02-24

【中文标题】SwiftUI：表单中的按钮

【英文标题】：SwiftUI: Button in Form

【发布时间】：2021-03-08 16:15:24

【问题描述】：

我正在 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）的，因为如果我在“正常”设置中的文本字段旁边使用按钮，则不会发生这种情况。

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

【参考方案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")
               
        
    

【讨论】：

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