SwiftUI TabView with simultaneousGesture

Question

I have a TabView with some views that have DragGestures inside. I want to be able to drag the views along with the TabView paging. I am trying to use simultaneousGesture for the drag gesture. This works with a ScrollView but not with a TabView. As you can see in the example the green square on the second page can be dragged around but this doesn't happen simultaneously with the TabViews horizontal scrolling.

Here is a simplified version of the code:

struct ContentView: View {
  let colors:[Color] = [.red, .green, .blue]
  @State private var location: CGPoint = CGPoint(x: 100, y: 100);

  var simpleDrag: some Gesture {
    DragGesture()
      .onChanged { value in
        self.location = value.location
      }
      .onEnded {_ in }
  }

  var body: some View {
    TabView{
      ForEach(colors, id: \.self) { color in
        Group {
          if color == .green {
            VStack {
              color
                .frame(width:100, height: 100)
                .position(location)
                .simultaneousGesture(simpleDrag)
            }
          } else {
            color
          }
        }
        .frame(width: 200, height: 200)
      }
    }
    .frame(width: 400, height: 400)
    .tabViewStyle(.page(indexDisplayMode: .never))
  }
}

And here is a version with a ScrollView that works really well, it even scrolls the scroll view when moving side to side and moves the green box when dragging it up and down.

struct ContentView: View {
  let colors:[Color] = [.red, .green, .blue]
  @State private var location: CGPoint = CGPoint(x: 100, y: 100);

  var simpleDrag: some Gesture {
    DragGesture()
      .onChanged { value in
        self.location = value.location
      }
      .onEnded {_ in }
  }

  var body: some View {
    ScrollView(.horizontal) {
      HStack {
        ForEach(colors, id: \.self) { color in
          Group {
            if color == .green {
              VStack {
                color
                  .frame(width:100, height: 100)
                  .position(location)
                  .simultaneousGesture(simpleDrag)
              }
            } else {
              color
            }
          }
          .frame(width: 200, height: 200)
        }
      }
    }
    .frame(width: 400, height: 400)
  }
}

score 0 · Answer 1 · answered Nov 06 '22 at 18:41

I've been searching for a similar answer as well. The closest I could find to a solution is to set the minimumDistance parameter of DragGesture. I found that DragGesture(minimumDistance:20) works fairly well to allow the TabView paging to happen before the DragGesture kicks in. It does delay the other gesture by 20 pixels, but it seems like a fair compromise to allow for both kind of gestures to function

SwiftUI TabView with simultaneousGesture

1 Answers1