首页 > 解决方案 > SwiftUI ScrollView 也触发 DragGesture

问题描述

我正在制作用户用自己的内容填写的可滑动闪存卡。该卡片包含一个垂直 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())
                }
            }
        }
    }
}

滚动滚动视图时激活卡片手势

标签: swiftui

解决方案


尝试使用手势修饰符,例如同时(with:)、sequential(before:) 或exclusive(before:) 来解决您的问题。


推荐阅读