SwiftUI 100 天：用 DragGesture 和 offset() 来移动视图

利用 SwiftUI 的 DragGesture 和 offset() 提升交互体验

SwiftUI 为应用程序提供了强大的手势识别功能，这就像给你的代码赋予了魔法。它能让你轻松识别用户的轻触、轻扫、拖拽和其他手势，为你的应用程序增添灵活性。今天，我们将深入探讨其中一项重要功能：DragGesture 。

认识 DragGesture

DragGesture 就像一个聪明的感应器，它能检测到用户在屏幕上拖拽的动作。当用户用手指按住一个视图并移动时，它就会启动。有了 DragGesture，你可以创建可拖拽的对象、滚动列表，甚至是绘制自定义形状。

使用 DragGesture 和 offset() 实现拖拽和移动

想象一下你有一个红色的矩形，你希望用户能把它拖动到屏幕上的任何位置。要实现这一点，只需遵循以下步骤：

struct ContentView: View {
  @State private var offset = CGSize.zero

  var body: some View {
    Rectangle()
      .fill(Color.red)
      .frame(width: 100, height: 100)
      .gesture(DragGesture()
        .onChanged { value in
          offset = value.translation
        }
      )
      .offset(offset)
  }
}

代码解释：

• 我们创建了一个红色的矩形视图，并设置了其大小。
• 我们为视图添加了一个 DragGesture 手势识别器。
• 在 onChanged 闭包中，我们将获取手势的平移值并将其存储在 offset 变量中。
• 然后，我们使用 offset() 修饰符将平移值应用到视图上，使它随着手指的拖拽而移动。

现在，你可以尽情拖拽矩形了，它会像磁铁一样跟随你的手指。

探索 offset() 的其他可能

offset() 修饰符不仅仅能移动视图的位置，它还可以控制其他属性，如旋转角度和缩放比例。这为创建引人入胜的动画和交互提供了无限可能。

应用场景

DragGesture 和 offset() 的组合可以为你的应用程序带来各种交互功能，例如：

• 可拖拽的列表项
• 可旋转的菜单选项
• 自定义手势控制的游戏控件

常见问题解答

1. 如何限制视图的拖拽范围？

你可以使用 DragGesture().simultaneous(with: AnyGesture()) 并将 AnyGesture() 替换为你想要的限制条件，例如 PanGesture()。

2. 如何获取手势开始和结束时的信息？

使用 DragGesture().onEnded 闭包来获取手势结束时的信息，并使用 DragGesture().onBegan 闭包获取手势开始时的信息。

3. 如何检测用户是否在多个视图上拖拽？

使用 SimultaneousGesture() 来检测在多个视图上同时发生的拖拽手势。

4. 如何防止手势冲突？

可以通过设置 priority() 属性来设置手势的优先级，从而解决手势冲突。

5. 如何使用 DragGesture 创建自定义手势？

你可以使用 DragGesture(minimumDistance: , coordinateSpace: ) 来创建最小距离或坐标空间约束的自定义手势。

结语

DragGesture 和 offset() 是 SwiftUI 中必备的交互工具，它们为你的应用程序赋予了触感和灵活性。通过掌握这些功能，你将能够创造引人入胜且直观的界面，让你的用户流连忘返。