使用 DragGesture 移动视图，同时在顶部有一个 ScrollView

Posted 2023-03-14

技术标签:

【中文标题】使用 DragGesture 移动视图，同时在顶部有一个 ScrollView【英文标题】：Moving view with DragGesture while having a ScrollView on top 【发布时间】：2021-05-02 15:03:58 【问题描述】：

我有一个用户可以拖动的视图。此视图包含一个显示信息列表的 ScrollView。但是，此视图会干扰包含视图的 DragGesture。

预期的行为是，只有当用户实际可以滚动某些内容时，ScrollView 的手势才会优先于容器。

这是可以用来测试我所指问题的代码：

struct MultipleDrag: View 
    
    @GestureState private var offset: CGFloat = 0
    
    private var gesture: some Gesture 
        DragGesture()
            .updating($offset)  value, state, transaction in
                state = -value.translation.height
            
    
    var body: some View 
        VStack 
            
            ScrollView 
                ForEach(1...20, id: \.self)  val in
                    Text(String(val))
                        .padding()
                
            
            .background(Color.green)
            .cornerRadius(10)
            .padding()
        
        .frame(height: 200)
        .background(Color.orange)
        .cornerRadius(10)
        .offset(y: -offset)
        .gesture(gesture)

如您所见，默认情况下，滚动视图从顶部开始。这意味着如果用户向下滑动，橙色容器应该向下移动，即使手势发生在绿色区域 (ScrollView) 中。当到达 ScrollView 的底部或滚动视图上没有足够的内容来实际滚动时，也会发生同样的情况。

有什么想法吗？

【问题讨论】：

【参考方案1】：

我认为你可以使用这个修饰符：