通过拖动手势更改偏移量时的摇晃视图

Question

编辑：在物理设备上以及模拟器与gif上看起来更糟

我有一个矩形网格。它们嵌套在HStack和VStack中。该网格被放入ZStack中。我将手势附加到嵌套的Grid上，看看拖动实现时会发生什么情况

import SwiftUI
import UIKit

struct ContentView: View {

    @State var numCell: CGFloat = 20
    @State var cellSize: CGFloat = 50

    var body: some View {
        return ZStack() {
            Grid(numCell: $numCell, cellSize: $cellSize)
        }.position(x: 0, y: 0).frame(minWidth: 0, maxWidth: .infinity, minHeight: 0, maxHeight: .infinity).background(Color.blue)
    }
}

struct Grid: View {

    @Binding var numCell: CGFloat
    @Binding var cellSize: CGFloat
    @State var gridDraggedX: CGFloat = 0
    @State var gridDraggedY: CGFloat = 0
    @State var accumulatedGridDraggedX: CGFloat = 0
    @State var accumulatedGridDraggedY: CGFloat = 0

    var body: some View {
        let drag = DragGesture().onChanged({ value in
            self.gridDraggedX = value.translation.width + self.accumulatedGridDraggedX
            self.gridDraggedY = value.translation.height + self.accumulatedGridDraggedY
        }).onEnded({ value in
            self.gridDraggedX = value.translation.width + self.accumulatedGridDraggedX
            self.gridDraggedY = value.translation.height + self.accumulatedGridDraggedY
            self.accumulatedGridDraggedX = self.gridDraggedX
            self.accumulatedGridDraggedY = self.gridDraggedY
        })

        return HStack(spacing: 2) {
            ForEach(0..<Int(numCell) - 1) { _ in
                VStack(spacing: 2) {
                    ForEach(0..<Int(self.numCell) - 1) { _ in
                        Rectangle()
                            .fill(Color.red)
                            .frame(width: self.cellSize,
                                   height: self.cellSize)
                    }
                }
            }
        }.gesture(drag).background(Color.green).offset(x: gridDraggedX, y: gridDraggedY)
    }
}

via GIPHY

Answer 1

DragGesture（coordinateSpace：.global）