阅读 111

用 allowsHitTesting() 禁用交互

译自 www.hackingwithswift.com/books/ios-s…

更多内容,欢迎关注公众号 「Swift花园」

喜欢文章?不如来个 🔺💛➕三连?关注专栏,关注我 🚀🚀🚀

用 allowsHitTesting() 禁用交互

SwiftUI 有一套高级的点击测试算法,既用于视图的 frame,也用于视图的内容。例如,如果你给某个文本视图添加了一个点击手势,那么文本视图的所有部分都会变成可点击的 —— 你不会因为刚好点击在一个空格的位置而让点击穿透文本视图。另一方面,如果你给一个圆添加相同的手势,SwiftUI 会自动忽略 frame 中透明的部分。

我们用一个盖在矩形上的圆来演示,两个形状都添加了 onTapGesture() modifier:

ZStack {
    Rectangle()
        .fill(Color.blue)
        .frame(width: 300, height: 300)
        .onTapGesture {
            print("矩形被点击!")
        }

    Circle()
        .fill(Color.red)
        .frame(width: 300, height: 300)
        .onTapGesture {
            print("圆被点击!")
        }
}
复制代码

尝试运行一下,你会发现,当你点击在圆内部时,打印 “圆被点击!”,但点击在圆外,矩形内时则打印 “矩形被点击!” —— 尽管圆的 frame 和矩形的 frame 是一样大的。

对于控制用户交互,SwiftUI 提供了两张方式,第一种就是 allowsHitTesting() modifier。当它被添加到视图并且参数被设置为 false 时,视图被认为是不可点击的。 这并不是视图吃掉了点击事件,它只是不捕获任何点击 —— 点击会直接穿透到它后面的视图。

把圆的代码改成下面这样:

Circle()
    .fill(Color.red)
    .frame(width: 300, height: 300)
    .onTapGesture {
        print("圆被点击!")
    }
    .allowsHitTesting(false)
复制代码

这时再点击圆会打印 “矩形被点击!”,因为圆已经拒绝响应点击。

另外一个控制交互的方式是使用 contentShape()modifier,它可以让我们指定可点击区域的形状。对于圆来说,默认的可点击形状就是相同的圆,但你可以像下面这样指定一个不同的形状:

Circle()
    .fill(Color.red)
    .frame(width: 300, height: 300)
    .contentShape(Rectangle())
    .onTapGesture {
        print("圆被点击!")
    }
复制代码

contentShape() modifier 在针对包含 Spacer 的栈应用的点击动作时十分有用,因为默认情况下,SwiftUI 不会在栈里的某个 spacer 被点击时触发动作。

下面是代码:

VStack {
    Text("Hello")
    Spacer().frame(height: 100)
    Text("World")
}
.onTapGesture {
    print("VStack被点击!")
}
复制代码

运行代码,你会发现你可以点击 “Hello” 标签和 “World” 标签,但不能点击它们之前的 spacer。不过,通过在 VStack 上应用 contentShape(Rectangle()),你可以让整个 VStack 变成可点击的,包括 spacer 在内:

VStack {
    Text("Hello")
    Spacer().frame(height: 100)
    Text("World")
}
.contentShape(Rectangle())
.onTapGesture {
    print("VStack被点击!")
}
复制代码

我的公众号 这里有Swift及计算机编程的相关文章,以及优秀国外文章翻译,欢迎关注~

Swift花园微信公众号