ios - SwiftUI ScrollView 的 onTapGesture 被子事件调用

Question

我偶然发现了一个与 SwiftUI 的 ScrollView 相关的事件冒泡问题。并且已经能够将其简化为一小段代码。请看下面:

struct ContentView: View {
  var body: some View {
    ScrollView() {
      Rectangle()
      .fill(Color.red)
      .frame(width: 200, height: 200)
      .onTapGesture {
        print("Rectangle onTapGesture")
      }
    }
    .onTapGesture {
      print("ScrollView onTapGesture")
    }
  }
}

在矩形之外点击时，我在控制台中看到:
ScrollView onTapGesture
但是，当点击 Rectangle 时，我看到打印了两行:
ScrollView onTapGesture Rectangle onTapGesture
ScrollView 似乎也在响应其 child 的事件......这不应该发生，对吧？我能做些什么来阻止这种情况？

编辑:只是为了增加疯狂，这两行并不总是以相同的顺序出现!我已经看到它们在重新启动应用程序时交换了代码，而没有对代码进行任何更改。

我的目标是在 ScrollView 上使用 onTapGesture 来捕捉“关闭”的点击，即没有被任何 ScrollView 的 child 捕捉/处理的点击。

非常感谢!

Answer 1

这是使用 GeometryReader 的简单解决方案和 VStack ScrollView 的容器内容:

struct ContentView: View {
  var body: some View {
    GeometryReader { contentView in
      ScrollView {
        VStack {
          Rectangle()
            .fill(Color.red)
            .frame(width: 200, height: 200)
            .onTapGesture {
              print("Rectangle onTapGesture")
          }
        }
        .frame(minWidth: contentView.size.width, minHeight: contentView.size.height, alignment: .top)
        .contentShape(Rectangle())
        .onTapGesture {
          print("ScrollViewArea onTapGesture")
        }
      }
    }
  }
}

这会给你一个 VStack总是与其父容器大小完全相同的容器 ScrollView由于我们从 GeometryReader 获得的动态值的 size属性(property)。

请注意 alignment: .top在这个容器上是否让它表现得像一个正常的 ScrollView将滚动项目锚定到顶部。额外的好处是，如果您删除该 alignment属性您的滚动项目将从屏幕中间开始 - 在偶然发现该解决方案之前，我发现这是不可能做到的。这在用户体验方面可能很有趣，因为较短的列表垂直居中可能是有意义的。我跑题了。

最后的注释是 .contentShape用于制作新的 VStack 的修饰符的空白空间可点击，这解决了您的问题。

这个想法来自这个 Hacking with Swift ScrollView effects using GeometryReader article概述如何将这个想法提升到另一个层次，在滚动时转换元素。非常有趣的东西!