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:)、sequential(before:) 或exclusive(before:) 来解决您的问题。