SwiftUI中点击Toggle时阻止父视图onTapGesture触发的方法

核心问题原因 #

SwiftUI的手势默认会向上冒泡传递，所以点击子视图内的Toggle时，父视图绑定的onTapGesture会被连带触发。要实现仅点击Toggle以外区域才唤起弹窗的需求，需要阻止Toggle的手势向上传递。

解决方案1：给Toggle添加高优先级手势 #

修改子视图CategoriesRow中的Toggle组件，通过.highPriorityGesture让Toggle优先响应自身点击，截断手势传递路径：

struct CategoriesRow: View {
    
    var categoryCode: Int
    var category: String
    @Binding var isRetired: Bool // 替换原@State为@Binding，确保状态能同步到父视图数据源
    
    var body: some View {
        HStack {
            Spacer()
            Text(category)
                .font(.title3)
            Spacer()
            Toggle("", isOn: $isRetired)
                .labelsHidden()
                .padding(.trailing, 30)
                .highPriorityGesture(TapGesture()) // 添加该行阻止手势冒泡
        }
    }
}

同时在父视图调用CategoriesRow时，传递绑定值（需确保你的categories数组是可绑定的，比如用@State或@Published修饰）：

CategoriesRow(categoryCode: categoryRecord.category_code, 
              category: categoryRecord.category, 
              isRetired: $categoryRecord.retired)

解决方案2：拆分点击区域（更直观） #

如果不想依赖手势优先级，可以直接调整布局，将行内的可点击区域（文本部分）与Toggle分离，仅给文本区域绑定点击手势：

父视图修改示例： #

ForEach(self.categories, id: \.self) { categoryRecord in
    VStack {
        HStack {
            if deletingRow && categoryRecord.category_code != 99999 {
                Button(action: {
                    delete(selectedRecord: categoryRecord)
                }, label: {
                    Image(systemName: "minus.circle.fill")
                        .foregroundColor(.red).imageScale(.large)
                }).padding(.horizontal)
            }
            
            // 仅文本区域绑定点击手势
            Text(categoryRecord.category)
                .font(.title3)
                .frame(maxWidth: .infinity)
                .onTapGesture {
                    categoriesRec = categoryRecord
                    if isSubView {
                        dismiss()
                    } else {
                        if deletingRow {
                            deletingRow.toggle()
                        }
                        self.showSheet.toggle()
                    }
                }
            
            // 独立的Toggle，不包含在点击区域内
            Toggle("", isOn: $categoryRecord.retired)
                .labelsHidden()
                .padding(.trailing, 30)
        }
        Divider()
    }
    .frame(height: 35)
    .frame(maxWidth: .infinity)
}

这种方式通过布局拆分明确区分可交互区域，从根源避免手势冲突。

内容的提问来源于stack exchange，提问作者rpetruzz