跳到主要内容

小心使用 SwiftUI 中的 .onTapGesture()

· 阅读需 3 分钟
GoSwiftUI
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){
            // ...
        }
    }
}