在SwiftUI中为DragGesture添加多点触控支持

要实现多点触控下同时激活多个按钮，核心是追踪每个独立触摸点与按钮的关联，并将激活状态从单个值改为集合存储。以下是基于你现有代码的纯SwiftUI解决方案：

核心修改点 #

• 将单个激活索引改为Set<Int>，支持多按钮同时激活
• 新增touchToButtonMap字典，记录每个触摸ID对应的按钮索引，实现多点触控的独立追踪
• 调整手势逻辑，每个触摸点的移动/结束事件都会更新映射集合，同步激活状态
• 修复按钮frame的实时更新问题，确保ScrollView滚动时触摸位置判断准确

修改后的完整代码 #

import SwiftUI

struct ContentView: View {
    @State private var activeButtonIndices: Set<Int> = []
    @State private var buttonFrames: [CGRect] = Array(repeating: .zero, count: 11)
    @State private var touchToButtonMap: [UUID: Int] = [:] // 追踪每个触摸ID对应的按钮索引
    private let buttonCount = 11
    
    var body: some View {
        VStack {
            activeButtonView
            buttonsView
        }
        .gesture(dragGesture)
    }
    
    private var activeButtonView: some View {
        Text("Active Buttons:\n\(activeButtonIndices.isEmpty ? "None" : activeButtonIndices.sorted().map { "\($0 + 1)" }.joined(separator: ", "))")
            .multilineTextAlignment(.center)
            .padding()
    }
    
    private var buttonsView: some View {
        ScrollView(.horizontal) {
            LazyHStack {
                ForEach(0 ..< buttonCount, id: \.self) { index in
                    Button(action: {}) {
                        EmptyView()
                    }
                    .frame(width: 70, height: 210)
                    .background(backgroundForButton(at: index))
                    .overlay(GeometryReader { geometry in
                        Color.clear
                            .onAppear {
                                buttonFrames[index] = geometry.frame(in: .global)
                            }
                            .onChange(of: geometry.frame(in: .global)) { newFrame in
                                // ScrollView滚动时实时更新按钮的全局frame
                                buttonFrames[index] = newFrame
                            }
                    })
                }
            }
        }
    }
    
    private func backgroundForButton(at index: Int) -> Color {
        activeButtonIndices.contains(index) ? .green : .blue
    }
    
    private var dragGesture: some Gesture {
        DragGesture(minimumDistance: 0, coordinateSpace: .global)
            .onChanged { value in
                // 找到当前触摸位置对应的按钮索引
                let buttonIndex = findButtonIndex(for: value.location)
                // 更新触摸ID与按钮的映射
                if let index = buttonIndex {
                    touchToButtonMap[value.id] = index
                } else {
                    touchToButtonMap.removeValue(forKey: value.id)
                }
                // 同步激活的按钮集合
                activeButtonIndices = Set(touchToButtonMap.values)
            }
            .onEnded { value in
                // 移除结束的触摸映射，更新激活状态
                touchToButtonMap.removeValue(forKey: value.id)
                activeButtonIndices = Set(touchToButtonMap.values)
            }
    }
    
    private func findButtonIndex(for location: CGPoint) -> Int? {
        buttonFrames.enumerated().first { $0.element.contains(location) }?.offset
    }
}

关键逻辑说明 #

1. 触摸追踪：DragGesture的value.id是每个触摸点的唯一标识符，通过touchToButtonMap将触摸ID与按钮索引绑定，确保多手指操作时互不干扰。
2. 激活状态同步：每次触摸移动或结束时，从映射字典中提取所有当前激活的按钮索引，更新activeButtonIndices集合。
3. Frame实时更新：通过onChange(of: geometry.frame(in: .global))监听按钮全局位置变化，解决ScrollView滚动时按钮位置偏移导致的触摸判断错误问题。

这个方案完全基于SwiftUI实现，保留了你原有的拖动激活功能，同时支持任意数量的手指同时操作多个按钮。

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