DragGesture + ScrollView = problems. Any good workarounds?

Question

Created Sep ’19

Replies 3

Boosts 3

Views 7.5k

Participants 4

When placing a DragGesture on a view containing a ScrollView, dragging within the ScrollView causes onChanged to trigger, while onEnded does not trigger. Does anybody have a workaround for this?

struct ContentView: View {
     @State var offset: CGSize = .zero
     var body: some View {
          ZStack {
          Spacer()
          Color.clear


          if self.offset != .zero {
               Color.blue.opacity(0.25)
          }


          VStack {
               Color.gray.frame(height: 44.0)
               ScrollView {
                    ForEach(0..<100, id: \.self) { _ in
                         Text("Don't move please")
                    }
                   }
               Color.gray.frame(height: 44.0)
           }
          .frame(width: 320.0, height: 568.0)
          .offset(self.offset)
          .animation(.easeInOut)
          .gesture( DragGesture(minimumDistance: 10.0, coordinateSpace: .global)
          .onChanged { (value) in
               self.offset = value.translation
          }
          .onEnded { (_) in
               self.offset = .zero
          })
      }
   }
}

I know I could place gestures on the top/bottom gray areas (they represent bars), but in my actual app the owner of the drag gesture is a container that knows nothing about its contents.

Boost

Answer 1

joeycarmello OP

Nov ’20

I've run into two workarounds that are not ideal but accomplish the goal.

Sequence a long press gesture before the drag gesture. longPress.sequenced(before: drag)
Add an empty onTapGesture *before* the drag gesture.

0

Answer 2

nixed OP

Jan ’22

Work around I did was

I used a ScrollView where in I had a state if it is currently scrolling
instead of DragGesture's .onChanged(), I used .updating() (this seems to be ran first before onChanged)
I checked the ScrollView's scrolling state, if it's being scrolled, don't update the View's drag offset else update it.

0

Answer 3

fiser333 OP

May ’22

What you observe is that your gesture is being cancelled. From Adding Interactivity with Gestures - Apple Developer article:

SwiftUI only invokes the onEnded(_:) callback when the gesture succeeds.

This is what works for me:

struct DragGestureViewModifier: ViewModifier {
    @GestureState private var isDragging: Bool = false
    @State var gestureState: GestureStatus = .idle

    var onStart: Callback?
    var onUpdate: ((DragGesture.Value) -> Void)?
    var onEnd: Callback?
    var onCancel: Callback?

    func body(content: Content) -> some View {
        content
            .gesture(
                DragGesture()
                    .updating($isDragging) { _, isDragging, _ in
                        isDragging = true
                    }
                    .onChanged(onDragChange(_:))
                    .onEnded(onDragEnded(_:))
            )
            .onChange(of: gestureState) { state in
                guard state == .started else { return }
                gestureState = .active
            }
            .onChange(of: isDragging) { value in
                if value, gestureState != .started {
                    gestureState = .started
                    onStart?()
                } else if !value, gestureState != .ended {
                    gestureState = .cancelled
                    onCancel?()
                }
            }
    }

    func onDragChange(_ value: DragGesture.Value) {
        guard gestureState == .started || gestureState == .active else { return }
        onUpdate?(value)
    }

    func onDragEnded(_ value: DragGesture.Value) {
        gestureState = .ended
        onEnd?()
    }

    enum GestureStatus: Equatable {
        case idle
        case started
        case active
        case ended
        case cancelled
    }
}

3