Question

我有可以拖动的容器视图，并且里面有带有多个按钮的scrollview。当我拖动容器视图时，scrollViews开始怪异地跳来跳去，按钮的点击框也开始偏离实际的按钮。（你可以看到我的gif图片）但是，当我触摸滚动视图时，一切都会恢复正常。

此代码仅用于测试

那是主要观点

    struct ContentView: View {
    @State var width : CGFloat = 300
    @State var height : CGFloat = 300
    var body: some View {
        VStack{
            SecondView(width: width, height: height){
                ScrollView{
                    VStack{
                        ForEach(0...10, id : \.self){ i in
                            
                            TestButton(number: i)
                            
                        }
                    }
                }
            }
            Slider(value: $width, in: 100...500)
            Slider(value: $height, in: 100...500)
        }
    }
}

那是可拖动的视图

    struct SecondView<Content : View> : View {
    var width : CGFloat
    var height : CGFloat
    var content : () -> Content
    @GestureState private var dragState = DragState.inactive
    @State var position : CGSize = CGSize(width: 0, height: 0)
    var body : some View {
        let dragGesture = DragGesture().updating($dragState){ drag, state, transition in
            state = .dragging(translation: drag.translation)
            
        }.onEnded({drag in
            self.position.height+=drag.translation.height
            self.position.width+=drag.translation.width
        })
        return VStack{
            Handle()
            
            content().padding()
            
        }.frame(width: width, height: height).background(Color.yellow).cornerRadius(10)
            .offset(x: self.position.width + dragState.translation.width, y: self.position.height + dragState.translation.height)
            .gesture(dragGesture)
        
    }
    
    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
            }
        }
    }
}

我不确定这是错误还是我做错了什么，但看起来像错误预先感谢您的回答和建议

Answer 1

.offset修饰符不会更改视图的布局，因此移动的视图实际上保留在同一位置，而命中区域保留在同一位置，只是在不同的位置绘制。

因此.offset不适合您的目标，而是重构为使用.position，它确实会更改视图层次结构（但也会影响整个布局，因此您的浮动窗格应放在单独的{{ 1}}，以避免他人。

ScrollView在其移动视图内部时的行为异常。 SwiftUI

1 个答案: