SwiftUI ScrollView 也触发 DragGesture

Question

我正在制作可滑动的闪存卡，用户可以用自己的内容填写。该卡包含一个垂直 ScrollView（用于文本）和水平 ScrollView（用于标签）。该卡还附加了拖动手势。但是，当我滚动 ScrollViews 时，它也会触发 DragGesture 的 .onChanged （但甚至不跟随 .onEnded）。如何在手势之前优先考虑 ScrollView？

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

尝试使用手势修饰符，例如同时（with:)、顺序（before:) 或排他性（before:) 来解决您的问题。