在 SwiftUI 中没有导航视图的情况下向后滑动手势答案

【问题标题】：Swipe back gesture like in without navigationView in SwiftUI在 SwiftUI 中没有导航视图的情况下向后滑动手势
【发布时间】：2020-08-08 11:45:42
【问题描述】：

我正在尝试在 SwiftUI 中创建一个简单的游戏，并且我正在尝试获得类似于 navigationView 上的向后滑动手势，但没有将我的视图放在 navigationView 中。由于这是一个游戏，添加 naviagationView 会显得格格不入。

这是我目前所拥有的：

struct SwipingView : View {
  @State private var dragAmount = CGSize.zero
  @GestureState private var position = CGSize.zero
  func addToPosition(translation:CGSize) -> CGSize {
    return CGSize(width: dragAmount.width + translation.width, height: dragAmount.height + translation.height)
  }

  var body: some View{
    return ZStack(){
      Rectangle().fill(Color.red).frame(width: 100, height:400).scaleEffect(x:5,y:1,anchor: .leading)
        .offset(x: 190)
        .offset(x: addToPosition(translation: position).width )
        .gesture(
          DragGesture(minimumDistance: 20)
            .updating(self.$position){ value, state, translation in
              state = value.translation
            }
            .onEnded{ value in
              if value.translation.width > 50 {
                guard position.width + self.addToPosition(translation: CGSize(width:330, height:0)).width < 330-1 else {
                  return print("too far right")
                }
                self.dragAmount = self.addToPosition(translation: CGSize(width:330, height:0))
              } else {
                guard position.width + self.addToPosition(translation: CGSize(width:-330, height:0)).width > -330-1 else {
                  return print("too far left")
                }
                self.dragAmount = self.addToPosition(translation: CGSize(width:-330, height:0))
              }
            }
        )
    }.animation(Animation.linear)
  }
}

我还是 swift 的新手，所以即使我查看了堆栈溢出并且找不到我正在寻找的确切内容，我也可能缺少一些明显的东西。

这就是它的样子。如您所见，我可以将视图从视图上的任何位置滑开，但我想仅在左边缘或什至仅在左侧的前 5% 处滑开。 p>

【问题讨论】：

标签： swift swiftui swift5

【解决方案1】：

这是可能的解决方案 - 想法是将手势附加到左侧尽可能宽的覆盖层上。使用 Xcode 12 / iOS 14 测试

注意：在演示中，活动区域使用Color.blue 而不是Color.clear 以提高可见性

struct SwipingView : View {
  @State private var dragAmount = CGSize.zero
  @GestureState private var position = CGSize.zero
  func addToPosition(translation:CGSize) -> CGSize {
    return CGSize(width: dragAmount.width + translation.width, height: dragAmount.height + translation.height)
  }

  var body: some View{
    return ZStack(){
      Rectangle().fill(Color.red).frame(width: 100, height:400).scaleEffect(x:5,y:1,anchor: .leading)
        .overlay(Color.clear.frame(width: 40)       // << make width as needed
        .contentShape(Rectangle())
        .gesture(
          DragGesture(minimumDistance: 20)
            .updating(self.$position){ value, state, translation in
              state = value.translation
            }
            .onEnded{ value in
              if value.translation.width > 50 {
                guard position.width + self.addToPosition(translation: CGSize(width:330, height:0)).width < 330-1 else {
                  return print("too far right")
                }
                self.dragAmount = self.addToPosition(translation: CGSize(width:330, height:0))
              } else {
                guard position.width + self.addToPosition(translation: CGSize(width:-330, height:0)).width > -330-1 else {
                  return print("too far left")
                }
                self.dragAmount = self.addToPosition(translation: CGSize(width:-330, height:0))
              }
            }
        ), alignment: .leading)
        .offset(x: 190)
        .offset(x: addToPosition(translation: position).width )
    }.animation(Animation.linear)
  }
}

【讨论】：