Flutter 學習 - Widget 之 手勢識別

前言

在進行Android開發的時候我們通常會遇到事件這個詞，比如OnTouch事件，點擊事件等等，Android中的點擊事件是直接在控件上進行添加，那在Flutter中我們需要怎麼給Widget添加一些事件呢，這篇文章將介紹Flutter中的手勢事件

在Flutter中我們發現按鈕有onPressed來響應點擊事件，但是我們如果想要監聽Text，就會看到沒有onPressed這個屬性，想要給Text添加點擊事件，就需要專門處理手勢事件的Widget來嵌套Text，在Flutter中手勢其實也是一個Widget，正是應了那麼話，EveryThing is a Widget ！！！

正文

Flutter 中 手勢識別的Widget 是 GestureDetector

手勢的使用很簡單，我們只要在GestureDetector中嵌套需要檢測手勢的Widget就行，然後實現想要監聽的手勢的方法就行

效果圖

老規矩，有圖有真相，我們先看效果，

tips：看右邊控制檯的輸出

代碼

下面是GestureDetector的代碼示例

GestureDetector(
        child: Text(
          "點我",
          style: TextStyle(fontSize: 36),
        ),
        onDoubleTap: () {
          print("onDoubleTap");
        },
        onForcePressEnd: (ForcePressDetails forcePressDetails) {
        //   print("onForcePressEnd = " +
        //       forcePressDetails.localPosition.toString());
        },
        onHorizontalDragDown: (DragDownDetails dragDownDetails) {
        //   print("onHorizontalDragDown = " +
        //       dragDownDetails.localPosition.toString());
        },
        onLongPress: () {
          print("onLongPress");
        },
        onPanDown: (DragDownDetails dragDownDetails) {
        //   print("onPanDown = " + dragDownDetails.localPosition.toString());
        },
        onScaleStart: (ScaleStartDetails scaleStartDetails) {
        //   print("onScaleStart = " + scaleStartDetails.toString());
        },
        onSecondaryTapDown: (TapDownDetails tapDownDetails) {
        //   print("onSecondaryTapDown = " + tapDownDetails.toString());
        },
        onTap: () {
          print("onTap");
        },
        onVerticalDragDown: (DragDownDetails dragDownDetails) {
        //   print("onVerticalDragDown = " + dragDownDetails.toString());
        },
      )

源碼分析

下面我們來看下GestureDetector的源碼
注：參數均爲可選

GestureDetector({
    Key key,
    this.child,
    this.onTapDown,
    this.onTapUp,
    this.onTap,
    this.onTapCancel,
    this.onSecondaryTapDown,
    this.onSecondaryTapUp,
    this.onSecondaryTapCancel,
    this.onDoubleTap,
    this.onLongPress,
    this.onLongPressStart,
    this.onLongPressMoveUpdate,
    this.onLongPressUp,
    this.onLongPressEnd,
    this.onVerticalDragDown,
    this.onVerticalDragStart,
    this.onVerticalDragUpdate,
    this.onVerticalDragEnd,
    this.onVerticalDragCancel,
    this.onHorizontalDragDown,
    this.onHorizontalDragStart,
    this.onHorizontalDragUpdate,
    this.onHorizontalDragEnd,
    this.onHorizontalDragCancel,
    this.onForcePressStart,
    this.onForcePressPeak,
    this.onForcePressUpdate,
    this.onForcePressEnd,
    this.onPanDown,
    this.onPanStart,
    this.onPanUpdate,
    this.onPanEnd,
    this.onPanCancel,
    this.onScaleStart,
    this.onScaleUpdate,
    this.onScaleEnd,
    this.behavior,
    this.excludeFromSemantics = false,
    this.dragStartBehavior = DragStartBehavior.start,
  })

參數名字	參數類型	意義	必選 or 可選
key	Key	Widget 的標識	可選
child	Widget	要檢測手勢事件的 Widget	可選
onTapDown	GestureTapDownCallback	手指觸摸屏幕時產生 onTapDown 事件	可選
onTapUp	GestureTapDownCallback	手指離開屏幕時產生 onTapUp 事件，之後便會觸發 onTap 事件	可選
onTap	GestureTapCallback	點擊事件	可選
onTapCancel	GestureTapCancelCallback	當觸發 onTapDown 之後，取消點擊，則會觸發 onTapCancel，後面的 onTapDown 和 onTapUp 都不會在觸發	可選
onDoubleTap	GestureTapCallback	雙擊事件	可選
onLongPress	GestureLongPressCallback	長按屏幕時觸發，當監聽了 onLongPress 事件時，則不能監聽 onLongPressDragStart、onLongPressDragUpdate、onLongPressDragUp	可選
onLongPressUp	GestureLongPressUpCallback	長按屏幕，手指離開屏幕時觸發，當監聽了 onLongPressUp 事件時，則不能監聽 onLongPressDragStart、onLongPressDragUpdate、onLongPressDragUp	可選
onLongPressDragStart	GestureLongPressDragStartCallback	長按屏幕，並準備開始拖動時觸發，當監聽了 onLongPressDragStart 事件時，則不能監聽 onLongPress、onLongPressUp	可選
onLongPressDragUpdate	GestureLongPressDragUpdateCallback	長按屏幕後並拖動時觸發，當監聽了 onLongPressDragUpdate 事件時，則不能監聽 onLongPress、onLongPressUp	可選
onLongPressDragUp	GestureLongPressDragUpCallback	長按屏幕拖動，手指離開屏幕時觸發，當監聽了 onLongPressDragUp 事件時，則不能監聽 onLongPress、onLongPressUp	可選
onVerticalDragDown	GestureDragDownCallback	手指接觸屏幕，並且可能會開始垂直移動時觸發	可選
onVerticalDragStart	GestureDragStartCallback	手指接觸屏幕，並且已經開始垂直移動時觸發	可選
onVerticalDragUpdate	GestureDragUpdateCallback	手指接觸屏幕，並且垂直移動時觸發	可選
onVerticalDragEnd	GestureDragEndCallback	手指接觸屏幕垂直移動，然後手指離開屏幕時觸發	可選
onVerticalDragCancel	GestureDragCancelCallback	當 onVerticalDragDown 沒有完成時就會觸發 onVerticalDragCancel	可選
onHorizontalDragDown	GestureDragDownCallback	手指接觸屏幕，並且可能會開始水平移動時觸發	可選
onHorizontalDragStart	GestureDragStartCallback	手指接觸屏幕，並且已經開始水平移動時觸發	可選
onHorizontalDragUpdate	GestureDragUpdateCallback	手指接觸屏幕，並且水平移動時觸發	可選
onHorizontalDragEnd	GestureDragEndCallback	手指接觸屏幕水平移動，然後手指離開屏幕時觸發	可選
onHorizontalDragCancel	GestureDragCancelCallback	當 onHorizontalDragDown 沒有完成時就會觸發 onHorizontalDragCancel	可選
onForcePressStart	GestureForcePressStartCallback	手指與屏幕接觸，並且當有足夠的壓力時纔會觸發，注意，這個事件僅在具有壓力檢測屏幕的設備上觸發。	可選
onForcePressPeak	GestureForcePressPeakCallback	手指與屏幕接觸，並且當有壓力達到最大時觸發，注意，這個事件僅在具有壓力檢測屏幕的設備上觸發。	可選
onForcePressUpdate	GestureForcePressUpdateCallback	手指與屏幕接觸，有足夠的壓力並在屏幕上移動時觸發，注意，這個事件僅在具有壓力檢測屏幕的設備上觸發。	可選
onForcePressEnd	GestureForcePressEndCallback	手指與屏幕分開時觸發，注意，這個事件僅在具有壓力檢測屏幕的設備上觸發。	可選
onPanDown	GestureDragDownCallback	手指與屏幕接觸，並且可能開始移動時觸發	可選
onPanStart	GestureDragStartCallback	手指與屏幕接觸，並且開始移動時觸發	可選
onPanUpdate	GestureDragUpdateCallback	手指在屏幕上移動時觸發	可選
onPanEnd	GestureDragEndCallback	手指離開屏幕時觸發	可選
onPanCancel	GestureDragCancelCallback	當 onPanDown 沒有完成時觸發 onPanCancel	可選
onScaleStart	GestureTapDownCallback	手指與屏幕接觸，並且即將有縮放操作時觸發，初始值爲 1.0	可選
onScaleUpdate	GestureTapDownCallback	手指與屏幕接觸，並且有縮放操作時觸發	可選
onScaleEnd	GestureTapDownCallback	onScaleStart 之後，手指離開屏幕時觸發	可選
behavior	HitTestBehavior	在命中測試期間，此手勢檢測器應如何表現。	可選
excludeFromSemantics	bool	是否從語義樹中排除這些手勢。因爲 Widget	可選
dragStartBehavior	DragStartBehavior	確定處理拖動開始行爲的方式。	可選

關於Flutter中GestureDetector的使用方法就介紹完了。
以下是我的Flutter系列的鏈接，後續會持續更新，歡迎大家指正。

Flutter 系列文章

• Flutter 學習 - 開篇
• Flutter 學習 - 基礎框架
• Flutter 學習 - 網絡請求和數據解析
• Flutter 學習 - Widget 之 Text
• Flutter 學習 - Widget 之 RichText
• Flutter 學習 - Widget 之 Image和Icon
• Flutter 學習 - Widget 之 TextField
  
• Flutter 學習 - Widget 之 對話框
• Flutter 學習 - Widget 之 菜單按鈕
• Flutter 學習 - Widget 之 佈局 Widget
• Flutter 學習 - 容器類Widget
• Flutter 學習 - 可滾動的 Widget
• Flutter 學習 - 功能類Widget

更多關於技術相關的內容請關注博主公衆號–迷途程序猿