設定元件點擊程式的 SwiftUI onTapGesture

開發 App 時，我們時常希望點選某個元件時做某些事。在 SwiftUI 這樣的功能十分容易做到，不管是文字還是圖片都能點選，只要從 UI 元件呼叫 function onTapGesture 設定被點擊時執行的程式即可。

function onTapGesture 來自 protocol View，它的宣告如下，接下來就讓我們看看這個它的應用實例吧。

func onTapGesture(count: Int = 1, perform action: @escaping () -> Void) -> some View

onTapGesture(count:perform:)

點選文字

Text("我是可以按的文字唷")
   .onTapGesture {
      print("文字被按了")
   }

ps: 切換到 Debug Preview 才能看到點選文字列印的訊息，相關資訊可參考以下連結:

利用 Debug Preview 讓 print 發揮作用

點選圖片

Image("pic")
   .onTapGesture {
      print("圖片被按了")
   }

點選圓形

Circle()
   .onTapGesture {
      print("圓形被按了")
   }

點選透明區塊的 contentShape

onTapGesture 正常情況下只能點選看得到的部分，以下例子我們將 Text 設為 200 * 200，由於它的背景是透明的，因此只有文字和邊框可點選。

Text("點我")
   .frame(width: 200, height: 200)
   .border(Color.black, width: 5)
   .onTapGesture {
      print("tap")
   }

若想讓透明背景也可點選，則須加上 contentShape 控制可點選的區塊，呼叫 contentShape(Rectangle()) 讓整個 Text 變成可點選。

Text("點我")
   .frame(width: 200, height: 200)
   .border(Color.black, width: 5)
   .contentShape(Rectangle())
   .onTapGesture {
      print("tap")
   }