offset - SwiftUI：手势和偏移没有按预期工作

Question

我正在使用偏移量和手势修饰符在屏幕上移动一个圆圈。当我使用此代码时，一切都按预期工作：

import SwiftUI

struct MovingCircle: View {

@State private var dragged = CGSize.zero

var body: some View {
    Circle()
        .offset(x: self.dragged.width)
        .frame(width: 20, height: 20)
        .gesture(DragGesture()
            .onChanged{ value in
                self.dragged = value.translation
        }
        .onEnded{ value in
            self.dragged = CGSize.zero
            }
    )
 }
}

但是，我不想将圆圈重置为 onEnded 的原始位置。我希望它保持原位，然后在拖动时再次移动。当我使用以下代码时，我无法在重新拖动时再次移动圆圈并且它保持在原位：

import SwiftUI

struct MovingCircle: View {

@State private var dragged = CGSize.zero

var body: some View {
    Circle()
        .offset(x: self.dragged.width)
        .frame(width: 20, height: 20)
        .gesture(DragGesture()
            .onChanged{ value in
                self.dragged = value.translation
        }
        .onEnded{ value in
            self.dragged = value.translation
            }
    )
}
}

这是什么原因，我遇到了一些错误还是我编码不正确？

标签： offsetgestureswiftui

Answer 1

首先，要了解问题，.border(Color.red)在.frame()修饰符中添加a：

.frame(width: 20, height: 20).border(Color.red)

您会看到，当点移动时，它的框架保持在原位。这就是为什么以后，它不会响应手势。“可点击”区域不再与点匹配。并且因为内容区域现在是空的，它不再是“可点击的”。

要使框架随点移动，请颠倒顺序。.offset()应该稍后来：

.frame(width: 20, height: 20).border(Color.red)
.offset(x: self.dragged.width)

最后，您会看到在每个 之后.onEnded()，整个事情都会重置。解决它的一种方法是累积您在以前的手势中拖动了多少：

struct MovingCircle: View {

    @State private var dragged = CGSize.zero
    @State private var accumulated = CGSize.zero

    var body: some View {
        Circle()
            .frame(width: 20, height: 20).border(Color.red)
            .offset(x: self.dragged.width)

            .gesture(DragGesture()
                .onChanged{ value in
                    self.dragged = CGSize(width: value.translation.width + self.accumulated.width, height: value.translation.height + self.accumulated.height)
            }
            .onEnded{ value in
                self.dragged = CGSize(width: value.translation.width + self.accumulated.width, height: value.translation.height + self.accumulated.height)
                self.accumulated = self.dragged
                }
        )
    }
}