跳到主要内容

小心使用 SwiftUI 中的 .onTapGesture()

· 阅读需 3 分钟
GoSwiftUI
goswiftui.com

如果你一直在使用 SwiftUI,那么你很可能调用过修饰符 **.onTapGesture()**。 但是,使用此修饰符时要小心,因为它很容易变成一个非常糟糕的做法!

此修饰符非常方便,因为它允许你定义一个闭包,当用户点击已附加修饰符的 **View** 时将调用该闭包。

但是,使用此修饰符时要小心,因为它很容易变成一个非常糟糕的做法!

因此,让我们来看几个用例。

在此第一个用例中,我们使用修饰符 **.onTapGesture()** 在用户点击 **View** 时通过网络开始预取一些数据。

这是修饰符 **.onTapGesture()** 的一个很好的用例,因为它用于触发一个对用户完全透明的操作 👍

现在让我们来看第二个用例。

在此处,修饰符 **.onTapGesture()** 用于以模态方式显示 **View**

在此用例中,使用修饰符 **.onTapGesture()** 实际上是一个非常糟糕的做法!

原因是,以模态方式显示 **View** 是一个面向用户的操作,对于面向用户的操作,使用 **Button** 比使用修饰符 **.onTapGesture()** 更好。

原因是,使用 **Button** 会带来许多理想的副作用。

例如,该操作将对辅助功能层可见,并且该视图将具有一个高亮状态,在用户按下 **Button** 时显示视觉反馈。

因此请记住,即使调用修饰符而不是将复杂 **View** 包装在 **Button** 中很诱人,但如果你正在实现面向用户的操作,那么你肯定希望使用 **Button**

本文到此结束,我希望你享受这种新格式!

如果你想尝试一下,这里有代码:

// First Use Case

import SwiftUI

struct ContentView: View {

@StateObject var viewModel = ViewModel()

var body: some View {
VStack {
// ...
}
.onTapGesture {
viewModel.prefetchData()
}
}
}

// Second Use Case (Bad)

import SwiftUI

struct ContentView: View {

@State var showModal = false

var body: some View {
VStack {
// ...
}
.sheet(isPresented: $showModal){
// ...
}
.onTapGesture {
showModal = true
}
}
}

// Second Use Case (Good)

import SwiftUI

struct ContentView: View {

@State var showModal = false

var body: some View {
Button {
showModal = true
} label: {
VStack {
// ...
}
}
.sheet(isPresented: $showModal){
// ...
}
}
}