自定义基于手势的滑动卡中的ScrollView导致SwiftUI中出现问题

如何解决自定义基于手势的滑动卡中的ScrollView导致SwiftUI中出现问题

我已经制作了一个最小的可复制示例，将在下面粘贴。只需将其插入Xcode，您就会明白这笔交易是什么。本质上，我有一个自定义的Slide-Up卡。当枚举位置为.top时，我在Xcode模拟器中滑动ScrollView时，它会导致卡的位置发生轻微偏移。有什么方法可以锁定卡的位置？还是至少可以做到这一点，以使滑动卡内的ScrollView不会因滑动手势而出现问题？

内容视图：

struct ContentView : View {
    var body: some View {
        ZStack(alignment: Alignment.top) {
            Text("test")
                .frame(width: UIScreen.main.bounds.width,height: UIScreen.main.bounds.height)
                .background(Color.red)
            SlideOverCard {
                VStack {
                    ScrollView {
                    VStack {
                        ForEach(1..<100) { _ in
                            Text("test")
                        }
                    }.frame(width: UIScreen.main.bounds.width)
                    }
                    Text("TESTER LINE OF TEXT")
                    Spacer()
                    
                    
                }.frame(width: UIScreen.main.bounds.width)
            }
        }
        .edgesIgnoringSafeArea(.vertical)
    }
}

插卡：

struct SlideOverCard<Content: View> : View {
    @GestureState private var dragState = DragState.inactive
    @State var position = CardPosition.top
    var content: () -> Content
    var body: some View {
    let drag = DragGesture()
            .updating($dragState) { drag,state,transaction in
                state = .dragging(translation: drag.translation)
            }
            .onEnded(onDragEnded)
    return Group {
    Handle()
    self.content()
        }
        .frame(width: UIScreen.main.bounds.width,height: UIScreen.main.bounds.height)
        .background(Color.white)
        .cornerRadius(10.0)
        .shadow(color: Color(.sRGBLinear,white: 0,opacity: 0.13),radius: 10.0)
        .offset(y: self.position.rawValue + self.dragState.translation.height)
        .animation(self.dragState.isDragging ? nil : .interpolatingSpring(stiffness: 300.0,damping: 30.0,initialVelocity: 10.0))
        .gesture(drag)
    }
    private func onDragEnded(drag: DragGesture.Value) {
    let verticalDirection = drag.predictedEndLocation.y - drag.location.y
    let cardTopEdgeLocation = self.position.rawValue + drag.translation.height
    let positionAbove: CardPosition
    let positionBelow: CardPosition
    let closestPosition: CardPosition
    if cardTopEdgeLocation <= CardPosition.middle.rawValue {
            positionAbove = .top
            positionBelow = .middle
        } else {
            positionAbove = .middle
            positionBelow = .bottom
        }
    if (cardTopEdgeLocation - positionAbove.rawValue) < (positionBelow.rawValue - cardTopEdgeLocation) {
            closestPosition = positionAbove
        } else {
            closestPosition = positionBelow
        }
    if verticalDirection > 0 {
    self.position = positionBelow
        } else if verticalDirection < 0 {
    self.position = positionAbove
        } else {
    self.position = closestPosition
        }
    }
    }
    enum CardPosition: CGFloat {
    case top = 100
    case middle = 500
    case bottom = 850
    }
    enum DragState {
    case inactive
    case dragging(translation: CGSize)
    var translation: CGSize {
    switch self {
    case .inactive:
    return .zero
    case .dragging(let translation):
    return translation
        }
    }
    var isDragging: Bool {
    switch self {
    case .inactive:
    return false
    case .dragging:
    return true
        }
    }
}

句柄：

struct Handle : View {
    private let handleThickness = CGFloat(5.0)
    var body: some View {
        RoundedRectangle(cornerRadius: handleThickness / 2.0)
            .frame(width: 40,height: handleThickness)
            .foregroundColor(Color.secondary)
            .padding(5)
    }
}

解决方法

好吧，我设法重现了你的意思...

通过Xcode 12 / iOS 14测试

更新：在此处找到了解决方法

ScrollView {
    VStack {
        ForEach(1..<100) { _ in
            Text("test")
        }
    }.frame(width: UIScreen.main.bounds.width)
}
.background(Color.white)             // << make opaque background
.highPriorityGesture(DragGesture())  // << block below DragGesture

我也考虑将变体移动到“手柄”上（如您所愿）

    return VStack {  // << make it instead of Group
        Handle()
            .gesture(drag)   // << here !!
        self.content()
    }
    .frame(width: UIScreen.main.bounds.width,height: UIScreen.main.bounds.height)
    .background(Color.white)
    .cornerRadius(10.0)
    .shadow(color: Color(.sRGBLinear,white: 0,opacity: 0.13),radius: 10.0)
    .offset(y: self.position.rawValue + self.dragState.translation.height)
    .animation(self.dragState.isDragging ? nil : .interpolatingSpring(stiffness: 300.0,damping: 30.0,initialVelocity: 10.0))