SwiftUI：解决LazyVGrid元素点击缩放与滚动冲突问题

问题场景 #

为LazyVGrid内的元素添加自定义点击缩放修饰符后，点击缩放效果正常，但LazyVGrid的滚动功能失效；移除该修饰符后，滚动恢复正常。需要同时实现点击缩放效果与滚动功能。

问题原因 #

你当前使用的DragGesture(minimumDistance: 0)会独占所有触摸事件，包括滚动所需的拖拽手势。当触摸事件被这个手势拦截后，LazyVGrid所在的滚动容器（如ScrollView）无法接收到滚动相关的手势信号，因此滚动功能失效。

解决方案 #

我们可以通过两种方式实现需求：

方案1：使用pressAction配合onTapGesture（iOS 15+）

利用SwiftUI的pressAction监听按压状态，结合onTapGesture处理点击逻辑，这种方式不会拦截滚动手势，能完美兼容滚动和点击缩放。

修改后的ScaledTappable修饰符代码：

struct ScaledTappable: ViewModifier {
    @State private var isPressed = false
    let tapHandler: () -> Void
    
    func body(content: Content) -> some View {
        content
            .scaleEffect(isPressed ? 0.9 : 1)
            // 按压时的缩放动画
            .animation(.smooth(duration: 0.2), value: isPressed)
            // 处理点击事件
            .onTapGesture(perform: tapHandler)
            // 监听按压与释放状态
            .pressAction {
                isPressed = true
            } onRelease: {
                withAnimation(.bouncy(duration: 0.5)) {
                    isPressed = false
                }
            }
    }
}

extension View {
    @ViewBuilder
    func tappable(enabled: Bool = true, onTap: @escaping () -> Void) -> some View {
        if enabled {
            self.modifier(ScaledTappable(tapHandler: onTap))
        } else {
            self.opacity(0.3)
        }
    }
}

方案2：优化DragGesture，区分点击与滚动动作

如果需要兼容iOS 15以下版本，可以优化原有的DragGesture，通过判断拖拽距离区分点击（短距离）和滚动（长距离），仅在点击时触发缩放和点击回调，滚动时让渡事件给滚动容器。

修改后的代码：

struct ScaledTappable: ViewModifier {
    @State private var isPressed = false
    let tapHandler: () -> Void
    // 定义点击与滚动的阈值，可根据需求调整
    private let tapThreshold: CGFloat = 10
    
    func body(content: Content) -> some View {
        content
            .scaleEffect(isPressed ? 0.9 : 1)
            .gesture(
                DragGesture(minimumDistance: 0)
                    .onChanged { value in
                        let totalTranslation = abs(value.translation.width) + abs(value.translation.height)
                        if totalTranslation < tapThreshold {
                            withAnimation(.smooth(duration: 0.2)) {
                                isPressed = true
                            }
                        } else {
                            // 拖拽距离超过阈值，判定为滚动，取消缩放状态
                            withAnimation(.smooth(duration: 0.2)) {
                                isPressed = false
                            }
                        }
                    }
                    .onEnded { value in
                        withAnimation(.bouncy(duration: 0.5)) {
                            isPressed = false
                        }
                        let totalTranslation = abs(value.translation.width) + abs(value.translation.height)
                        // 仅当拖拽距离小于阈值时，触发点击回调
                        if totalTranslation < tapThreshold {
                            tapHandler()
                        }
                    }
            )
    }
}

extension View {
    @ViewBuilder
    func tappable(enabled: Bool = true, onTap: @escaping () -> Void) -> some View {
        if enabled {
            self.modifier(ScaledTappable(tapHandler: onTap))
        } else {
            self.opacity(0.3)
        }
    }
}

说明 #

• 方案1更简洁高效，利用系统原生的按压/点击事件，无需手动判断手势，推荐在iOS 15及以上版本使用。
• 方案2通过手势位移判断区分点击和滚动，兼容更低版本iOS，阈值可根据实际交互体验调整。

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