SwiftUI 在View上同时使用.offset和.position修饰符到底发生了什么，决定了最终的位置？

Question

当我尝试给 View 初始 position 时，我有这个问题，然后用户可以使用拖动手势将 View 的位置更改为任何位置。 虽然我已经通过仅在视图上使用.position(x:y:)解决了这个问题，但一开始我在考虑使用.position(x:y:)来给出初始 position 和.offset(offset:)来制作同时查看手势移动。 现在，我真的只想更详细地了解，当我同时使用它们（下面的代码）时到底发生了什么，所以我可以解释下面的视图中发生了什么。

我无法在下面的视图中解释的是：当我只是在 VStack 框上拖动手势时，它会按预期工作并且 VStack 会随着手指手势移动，但是，一旦手势结束并尝试在 VStack 上开始新的拖动手势，VStack盒子突然回到原来的position（就像加载代码时跳转到原来的position），然后开始随着手势移动。 请注意，手势像常规手势一样移动，但 VStack 已经跳到不同的 position，因此它从不同的 position 开始移动。这导致指尖不再位于 VStack 框的顶部，而是离开了一段距离，尽管 VStack 的移动轨迹与拖动手势的轨迹相同。

我的问题是：为什么.position(x:y:)修饰符似乎只在检测到的每个新拖动手势的最开始时生效，但在拖动手势动作期间似乎.offset(offset:)主导了主要运动并且VStack 停在它被拖到的地方。 但是一旦启用了新的拖动手势，VStack 就会突然跳到原来的 position。我无法理解这种行为是如何通过时间轴发生的。 有人可以提供一些见解吗？

请注意，我已经解决了这个问题以实现我所需要的，现在只是了解同时使用.position(x:y:)和.offset(offset:)时到底发生了什么，所以请避免一些建议之类的。 不要同时使用它们，谢谢。 下面的代码假设在复制和粘贴后可以运行，如果不是，请原谅我的错误，因为我删除了几行以使其更清晰地重现问题。

import SwiftUI

struct ContentView: View {

    var body: some View {

        ButtonsViewOffset()
    }
}

struct ButtonsViewOffset: View {

    let location: CGPoint = CGPoint(x: 50, y: 50)
    @State private var offset = CGSize.zero
    @State private var color = Color.purple

    var dragGesture: some Gesture {
        DragGesture()
            .onChanged{ value in
                self.offset = value.translation
                print("offset onChange: \(offset)")
            }
            .onEnded{ _ in
                if self.color == Color.purple{
                    self.color = Color.blue
                }
                else{
                    self.color = Color.purple
                }

            }
    }
    
    var body: some View {
        VStack {
            Text("Watch 3-1")
            Text("x: \(self.location.x), y: \(self.location.y)")
        }
        .background(Color.gray)
        
        .foregroundColor(self.color)
        .offset(self.offset)
        .position(x: self.location.x, y: self.location.y)
        .gesture(dragGesture)
        
    }
}


struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        Group {
            ContentView()
        }
            
    }
}

Answer 1

您的问题与使用 position 和 offset 无关。 他们实际上同时工作。 Position 设置视图的绝对值 position，偏移量相对于绝对值 position 移动它。因此，您会注意到您的视图在屏幕上从 position (50, 50) 开始，然后您可以将它拖动到四周。 一旦你让 go，它就停在原处。 到目前为止，一切都很好。 然后你想再次移动它，它会弹回到原来的 position。它这样做的原因是你将位置设置为 let 常量的方式。 它需要是 state。

问题源于这样一个事实，即您在没有意识到的情况下将 offset 的值添加到 position。当您完成拖动时，offset 会保留最后的值。 但是，当您开始下一次拖动时，这些值再次从 (0,0) 开始，因此偏移量将重置为 (0,0) 并且视图将移回原始 position。关键是您只需要使用position 或更新.onEnded中的偏移量。 不要同时使用两者。 这里有一个集合 position，并且没有保存偏移量。 您如何处理它取决于您移动视图的目的。

首先，只需使用.position() ：

struct OffsetAndPositionView: View {
    
    @State private var position = CGPoint(x: 50, y: 50)
    @State private var color = Color.purple
    
    var dragGesture: some Gesture {
        DragGesture()
            .onChanged{ value in
                position = value.location
                print("position onChange: \(position)")
            }
            .onEnded{ value in
                if color == Color.purple{
                    color = Color.blue
                }
                else{
                    color = Color.purple
                }
            }
    }
    
    var body: some View {
        Rectangle()
            .fill(color)
            .frame(width: 30, height: 30)
            .position(position)
            .gesture(dragGesture)
    }
}

其次，只需使用.offset() ：

struct ButtonsViewOffset: View {
    @State private var savedOffset = CGSize.zero
    @State private var dragValue = CGSize.zero
    @State private var color = Color.purple
    
    var offset: CGSize {
        savedOffset + dragValue
    }

    var dragGesture: some Gesture {
        DragGesture()
            .onChanged{ value in
                dragValue = value.translation
                print("dragValue onChange: \(dragValue)")
            }
            .onEnded{ value in
                savedOffset = savedOffset + value.translation
                dragValue = CGSize.zero
                if color == Color.purple{
                    color = Color.blue
                }
                else{
                    color = Color.purple
                }
            }
    }

    var body: some View {
            Rectangle()
                .fill(color)
                .frame(width: 30, height: 30)
                .offset(offset)
                .gesture(dragGesture)
    }
}

// Convenience operator overload
func + (lhs: CGSize, rhs: CGSize) -> CGSize {
    return CGSize(width: lhs.width + rhs.width, height: lhs.height + rhs.height)
}