SwiftUI ScrollView 也触发 DragGesture

Question

I'm making swipeable flash cards that a user fills in with their own content. The card contains a vertical ScrollView (for text) and horizontal ScrollView (for tags). The card also has a drag gesture attached to it. However, when I'm scrolling through the ScrollViews it also triggers the DragGesture's.onChanged (but also doesn't even follow with.onEnded). How can I prioritize the ScrollView before the gesture?

struct ContentView: View {
    @State private var translation: CGSize = .zero

    var body: some View {
        GeometryReader { geometry in
            ZStack {
                Color(.blue).edgesIgnoringSafeArea(.all)

                VStack {
                    ScrollView {
                        Text("blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah")
                    }
                    Tags(decks: ["Tag", "Tag", "Tag", "Tag", "Tag", "Tag", "Tag"])
                }

                .padding(24)
                .frame(width: geometry.size.width - 48, height: geometry.size.height / 2)
                .background(Color.gray)
                .clipShape(RoundedRectangle(cornerRadius: 18, style: .continuous))
                .animation(.interactiveSpring(response: 0.5, dampingFraction: 0.75, blendDuration: 0))
                .offset(x: self.translation.width, y: self.translation.height)
                .gesture(DragGesture()
                    .onChanged { value in
                        self.translation = value.translation
                    }.onEnded { value in
                        self.translation = .zero
                    })
            }
        }
    }
}


struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

struct Tags: View {
    var decks: [String] = []

    var body: some View {
        ScrollView(.horizontal, showsIndicators: false) {
            HStack {
                ForEach(decks, id: \.self) { deck in
                    Text(deck)
                        .font(.system(size: 12, weight: .semibold))
                        .padding(.vertical, 6)
                        .padding(.horizontal, 12)
                        .background(Color.white)
                        .clipShape(Capsule())
                }
            }
        }
    }
}

Answer 1

try using gesture modifiers, such as simultaneously(with:), sequenced(before:) or exclusively(before:) to address you problem.