[譯]Flutter for Android Developers - Gesture Detection

在Flutter中怎樣爲一個Widget添加點擊事件監聽器

• in Android

  • 咱們一般調用一個View的setOnClickListener方法來監聽一個View的點擊事件。

• in Flutter

  • 咱們視狀況不一樣有兩種實現方法，一是直接傳遞一個處理事件的方法給Widget，二是經過GestureDetector來實現事件監聽與處理。

下面兩個例子對兩種實現方法作簡要說明：

@override
Widget build(BuildContext context) {
  return new RaisedButton(
      onPressed: () {
        print("click");
      },
      child: new Text("Button"));
}
複製代碼

這個例子描述瞭如何使用第一種方法實現點擊事件監聽。其實很簡單，在構造RaisedButton時直接傳遞一個用於處理事件的方法給onPressed參數就能夠了，當RaisedButton被點擊時名爲onPressed的參數所指向的方法就會被調用。在這裏就是簡單的打印出"click"。

Note： 這種方法僅當Widget自己已經支持事件監聽時使用。好比這裏的RaisedButton是系統提供的一個Widget，其自己已經支持了事件監聽，因此能夠直接在構造時傳遞一個用於處理事件的方法給它。

class SampleApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
        body: new Center(
      child: new GestureDetector(
        child: new FlutterLogo(
          size: 200.0,
        ),
        onTap: () {
          print("tap");
        },
      ),
    ));
  }
}
複製代碼

這個例子描述瞭如何使用第二種方法實現點擊事件監聽。這裏的關鍵是GestureDetector，咱們將須要響應點擊事件的Widget包裹到GestureDetector內部，而且傳遞一個用來處理點擊事件的方法給GestureDetector的onTap參數，當點擊事件發生時onTap所指向的方法就會被調用。在這裏就是簡單的打印出"tap"。

Note： 這種方法在Widget自己不支持事件監聽時使用。

小結： 在Flutter中實現點擊事件的監聽處理有兩種方法。 針對自己支持事件監聽的Widget能夠直接在構造Widget時傳入一個方法用於點擊事件處理。 針對自己不支持事件監聽的Widget能夠將其包裹在一個GestureDetector內部來實現點擊事件處理。

在Flutter中怎樣處理其餘事件

• in Android

  1. 咱們能夠經過各個組件提供的接口來設置相應的事件監聽器來監聽並處理咱們所關心的事件。
  2. 直接監聽touch事件自行斷定事件的類型並處理事件。
  3. 經過GestureDetector類來幫助監聽各類手勢事件。

• in Flutter

  • 也有一個GestureDetector類存在，利用它咱們能夠監聽不少事件。

在Flutter中GestureDetector能夠監聽如下事件：

• Tap

  • onTapDown 監聽處理一個剛剛接觸到屏幕的事件，相似於Android中Action爲ACTION_DOWN的touch event。
  • onTapUp 監聽處理一個接觸屏幕後的離屏事件，相似於Android中Action爲ACTION_UP的touch event。
  • onTap 監聽處理一個點擊事件，相似於Android中的onClick。
  • onTapCancel 相似Android中Action爲ACTION_CANCEL的touch event。出現該事件的緣由多是從ACTION_DOWN到ACTION_UP的過程中由於手指移出可交互區或者其餘異常致使的。

• Double tap

  • onDoubleTap 監聽處理一個雙擊事件。

• Long press

  • onLongPress 監聽處理一個長按事件。

• Vertical drag

  • onVerticalDragStart 監聽處理一個垂直方向拖拽事件的開始。
  • onVerticalDragUpdate 監聽處理一個垂直方向拖拽事件在拖拽過程當中的移動。
  • onVerticalDragEnd 監聽處理一個垂直方向拖拽事件的結束。

• Horizontal drag

  • onHorizontalDragStart 監聽處理一個水平方向拖拽事件的開始。
  • onHorizontalDragUpdate 監聽處理一個水平方向的拖拽事件在拖拽過程當中的移動。
  • onHorizontalDragEnd 監聽處理一個水平方向的拖拽事件的結束。

下面的例子簡單展現瞭如何使用GestureDetector來監聽一個Double tap事件：

AnimationController controller;
CurvedAnimation curve;

@override
void initState() {
  controller = new AnimationController(duration: const Duration(milliseconds: 2000), vsync: this);
  curve = new CurvedAnimation(parent: controller, curve: Curves.easeIn);
}

class SampleApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
        body: new Center(
          child: new GestureDetector(
            child: new RotationTransition(
                turns: curve,
                child: new FlutterLogo(
                  size: 200.0,
                )),
            onDoubleTap: () {
              if (controller.isCompleted) {
                controller.reverse();
              } else {
                controller.forward();
              }
            },
        ),
    ));
  }
}
複製代碼

在這個例子中咱們想讓一個FlutterLogo響應Double tap事件，可是FlutterLogo自己是不支持事件處理的Widget，因此這裏將其包裹在GestureDetector內部，並經過GestureDetector的onDoubleTap參數來傳遞一個用於處理Double tap事件的方法。 由於這個例子是想FlutterLogo在接收到Double tap事件後去執行一個旋轉動畫，因此這裏並非直接將FlutterLogo包裹在GestureDetector內部，而是先用描述一個旋轉動畫的組件RotationTransition包裹FlutterLogo，接着再在外層用GestureDetector包裹RotationTransition組件。關於在Flutter中實現動畫的介紹能夠參閱FFAD-Views。

小結： 在Flutter中使用GestureDetector能夠監聽處理大多數類型的事件，使用時只要將咱們想要接收事件的Widget包裹在GestureDetector內部，並傳遞事件處理方法給相應的參數便可。

英文原版傳送