SwiftUI List中如何禁用多行TapGesture同时触发？

问题场景 #

你在SwiftUI中实现了一个带点击手势的List，代码如下：

struct ContentView: View {
  var body: some View {
    List {
      ForEach(1..<10) { i in
        Text("Hello, world!")
          .onTapGesture {
            print("Tapped: ", i)
          }
      }
    }
  }
}

当前代码运行正常，但存在一个问题：用户同时点击两行时，控制台会输出两次结果，这种体验在跳转二级视图时并不理想，你需要实现类似UIKit中exclusiveTouch的行独占触摸效果。

解决方案 #

SwiftUI没有直接对应exclusiveTouch的属性，但可以通过两种方式解决这个问题：

方法1：利用List原生选择机制替代自定义手势 #

List本身支持行选择绑定，通过这种方式可以自动避免多点触发，同时配合NavigationLink跳转更符合SwiftUI的设计逻辑：

struct ContentView: View {
    @State private var selectedRow: Int? = nil
    
    var body: some View {
        NavigationStack {
            List(1..<10, selection: $selectedRow) { i in
                NavigationLink(
                    destination: Text("Detail Page \(i)"),
                    tag: i,
                    selection: $selectedRow
                ) {
                    Text("Hello, world! \(i)")
                }
            }
        }
        .onChange(of: selectedRow) { _, newValue in
            if let row = newValue {
                print("Tapped: ", row)
                // 额外操作逻辑可放在这里
            }
        }
    }
}

这种方式下，List会自动处理触摸独占，同一时间只能选中一行，不会出现多点触发的情况。

方法2：封装UIKit UITableViewCell开启exclusiveTouch #

如果需要保留自定义手势的灵活性，可以通过UIViewRepresentable封装UITableViewCell，手动开启exclusiveTouch属性：

首先创建封装的Cell组件：

struct ExclusiveTouchCell: UIViewRepresentable {
    let content: AnyView
    let onTap: () -> Void
    
    func makeUIView(context: Context) -> UITableViewCell {
        let cell = UITableViewCell()
        cell.exclusiveTouch = true
        
        // 将SwiftUI视图嵌入Cell
        let hostingView = UIHostingController(rootView: content).view
        hostingView?.translatesAutoresizingMaskIntoConstraints = false
        if let hostingView = hostingView {
            cell.contentView.addSubview(hostingView)
            NSLayoutConstraint.activate([
                hostingView.topAnchor.constraint(equalTo: cell.contentView.topAnchor),
                hostingView.leadingAnchor.constraint(equalTo: cell.contentView.leadingAnchor),
                hostingView.trailingAnchor.constraint(equalTo: cell.contentView.trailingAnchor),
                hostingView.bottomAnchor.constraint(equalTo: cell.contentView.bottomAnchor)
            ])
        }
        
        // 添加点击手势
        let tapGesture = UITapGestureRecognizer(
            target: context.coordinator,
            action: #selector(Coordinator.handleTap)
        )
        cell.addGestureRecognizer(tapGesture)
        
        return cell
    }
    
    func updateUIView(_ uiView: UITableViewCell, context: Context) {}
    
    func makeCoordinator() -> Coordinator {
        Coordinator(onTap: onTap)
    }
    
    class Coordinator: NSObject {
        let onTap: () -> Void
        
        init(onTap: @escaping () -> Void) {
            self.onTap = onTap
        }
        
        @objc func handleTap() {
            onTap()
        }
    }
}

然后在List中使用该组件：

struct ContentView: View {
    var body: some View {
        List(1..<10) { i in
            ExclusiveTouchCell(
                content: AnyView(Text("Hello, world! \(i)")),
                onTap: {
                    print("Tapped: ", i)
                    // 跳转或其他操作逻辑
                }
            )
        }
    }
}

通过开启UITableViewCell的exclusiveTouch属性，确保同一时间只有一个Cell能响应触摸事件。

总结 #

优先推荐方法1，符合SwiftUI原生设计，代码更简洁易维护；如果需要自定义手势的高度灵活性，可以选择方法2封装UIKit组件实现需求。

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