SwiftUI:手势和偏移量无法按预期工作 [英] SwiftUI: Gesture and Offset Are Not Working As Intended

问题描述

我正在使用偏移量和手势修饰符在屏幕上移动一个圆圈.当我使用此代码时，一切都会按预期进行:

I am using offset and gesture modifiers to move a circle around the screen. When I use this code, everything works as expected:

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的原始位置.我希望它保持原位，然后在拖动时再次移动.当我使用以下代码时，在重新拖动时，我失去了再次移动圆环的能力，并且圆环仍然保留在原处:

However, I do not want to have the circle reset to the original position onEnded. I would like it to remain in place and then be moved again on dragging. When I use the following code, I lose the ability to move the circle again upon re-dragging and it remains in place:

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
            }
    )
}
}

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

What is the cause of this, have I encountered some bug or have I coded it incorrectly?

推荐答案

首先，要了解该问题，请将.border(Color.red)添加到.frame()修饰符:

First, to understand the problem, add a .border(Color.red) to the .frame() modifier:

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

您将看到，当移动点时，其框架仍保留在原位.这就是为什么以后不响应手势的原因. 可敲击"区域不再与该点匹配.而且由于内容区域现在为空，因此不再是可插拔的".

You'll see that when the dot is moved, its frame remains in place. That is why later, it won't respond to gestures. The "tappable" area no longer matches the dot. And because the content area is now empty, it is no longer "tappable".

要使框架随点移动，请颠倒顺序. .offset()应该稍后出现:

To make the frame move with the dot, invert the order. The .offset() should come later:

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

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

Finally, you will see that after each .onEnded(), the whole thing resets back. One way to solve it, is by accumulating how much you dragged in previous gestures:

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
                }
        )
    }
}

这篇关于SwiftUI:手势和偏移量无法按预期工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！