SwiftUI | DragGestures onEnded never called if canceled by ScrollView

user_8700044 0
Viewed 2761

I have the following problem.

I have a View inside a ScrollView that I want to drag. Now, everything works fine, the dragging occurs and the scrolling as well. But once I try to do both, the dragOffset appears to stay, instead of resetting to its initial position.

More so, onEnded of the DragGesture never happens. How can I stop this from happening and reset the green Rectangle to its initial position?

Visual representation

Dragging or scrolling works just fine.

But whenever I do both, this happens.

Demo Code

struct ContentView: View {
    
    @State private var dragOffset: CGSize = .zero
    
    
    var body: some View {
        ScrollView {
            Rectangle()
                .frame(width: UIScreen.main.bounds.size.width, height: 300)
                .foregroundColor(.green)
                .offset(x: dragOffset.width)
        }
        .gesture(DragGesture()
            .onChanged { value in
                dragOffset = value.translation
            }
            .onEnded { value in
                dragOffset = .zero
            }
        )
        .animation(.default)
    }
}

Thank you!

swiftui swift ios
3 Answers

The solution is to use .updating with GestureState instead. It automatically sets the offset to its initial position, after the gesture got canceled for whatever reason.

That way, we are independent of calling onEnded to set it to its initial position which doesn't happen when you cancel the gesture by scrolling.

Code:

struct ContentView: View {
    
    @GestureState private var dragOffset: CGSize = .zero
    
    
    var body: some View {
        ScrollView {
            Rectangle()
                .frame(width: UIScreen.main.bounds.size.width, height: 300)
                .foregroundColor(.green)
                .offset(x: dragOffset.width)
        }
        .gesture(DragGesture()
            .updating($dragOffset) { value, state, transaction in
                state = value.translation
            }
        )
        .animation(.default)
    }
}

Note: You can of course still have an onChanged and onEnded block, you just don't have to set the offset to .zero any longer since it happens automatically.

Update

If you are to use it inside ObservableObject class and want your dragOffset to be published, then here would be a solution I found.

user_87000440

The best solution to this problem is to add geometry reader in the background. On change of geo.frame(in: .global).minY (when scrolling) update the offset. This method uses a small amount of processing (I found a ~2% increase in CPU usage).

Add the following code somewhere in the view :

.background(Group{
    GeometryReader{ geo in
        HStack{
             
        }
        .onChange(of: geo.frame(in: .global).minY) { _ in
            // update the offset
        }
    }
}
user_183975430

I think scrollView has its own gestures, such as UIScrollViewPanGestureRecognizer in UIScrollView, to add a DragGesture on scrollView will confuse it.

you can change your code a little like:

var body: some View {
    ScrollView {
        Rectangle()
            .frame(width: UIScreen.main.bounds.size.width, height: 300)
            .foregroundColor(.green)
            .offset(x: dragOffset.width, y: dragOffset.height)
            .gesture(DragGesture()
                .onChanged { value in self.dragOffset = value.translation }
                .onEnded { value in self.dragOffset = .zero }
        )
    }
    .animation(.default)
}

I think it can work well.

user_144376460
Related