Flutter - 手勢入門

手勢主要是使用者與移動（或任何基於觸控的裝置）應用程式互動的一種方式。手勢通常定義為使用者在打算啟用移動裝置的特定控制元件時執行的任何物理動作/移動。手勢可以像輕觸移動裝置螢幕一樣簡單，也可以像在遊戲應用程式中使用的更復雜的動作一樣複雜。

這裡提到了一些廣泛使用的手勢：

點選 - 用指尖觸碰裝置表面一小段時間，然後鬆開指尖。
雙擊 - 在短時間內點選兩次。
拖動 - 用指尖觸碰裝置表面，然後以穩定的方式移動指尖，最後鬆開指尖。
輕掃 - 類似於拖動，但以更快的速度進行。
捏合 - 使用兩根手指捏住裝置表面。
擴充套件/縮放 - 捏合的反向操作。
平移 - 用指尖觸碰裝置表面，並在任何方向移動而不鬆開指尖。

Flutter 透過其獨有的 Widget GestureDetector 對所有型別的手勢提供了極好的支援。GestureDetector 是一個非視覺 Widget，主要用於檢測使用者的手勢。要識別針對某個 Widget 的手勢，可以將該 Widget 放置在 GestureDetector Widget 內部。GestureDetector 將捕獲手勢並根據手勢分派多個事件。

下面給出了一些手勢和相應的事件：

點選

onTapDown
onTapUp
onTap
onTapCancel

雙擊

onDoubleTap

長按

onLongPress

垂直拖動

onVerticalDragStart
onVerticalDragUpdate
onVerticalDragEnd

水平拖動

onHorizontalDragStart
onHorizontalDragUpdate
onHorizontalDragEnd

平移

onPanStart
onPanUpdate
onPanEnd

現在，讓我們修改 hello world 應用程式以包含手勢檢測功能，並嘗試理解這個概念。

將MyHomePage Widget 的主體內容更改為如下所示：

body: Center( 
   child: GestureDetector( 
      onTap: () { 
         _showDialog(context); 
      }, 
      child: Text( 'Hello World', ) 
   ) 
),

注意，這裡我們在 Widget 層次結構中將GestureDetector Widget 放置在 Text Widget 之上，捕獲了 onTap 事件，然後最終顯示了一個對話方塊視窗。
實現 *_showDialog* 函式以在使用者點選hello world 訊息時顯示對話方塊。它使用通用的showDialog 和AlertDialog Widget 建立一個新的對話方塊 Widget。程式碼如下所示：

// user defined function void _showDialog(BuildContext context) { 
   // flutter defined function 
   showDialog( 
      context: context, builder: (BuildContext context) { 
         // return object of type Dialog
         return AlertDialog( 
            title: new Text("Message"), 
            content: new Text("Hello World"),   
            actions: <Widget>[ 
               new FlatButton( 
                  child: new Text("Close"),  
                  onPressed: () {   
                     Navigator.of(context).pop();  
                  }, 
               ), 
            ], 
         ); 
      }, 
   ); 
}

應用程式將使用熱過載功能在裝置中重新載入。現在，只需點選訊息“Hello World”，它將顯示如下所示的對話方塊：

現在，透過點選對話方塊中的關閉選項關閉對話方塊。

完整的程式碼（main.dart）如下所示：

import 'package:flutter/material.dart'; 
void main() => runApp(MyApp()); 

class MyApp extends StatelessWidget { 
   // This widget is the root of your application.    
   @override 
   Widget build(BuildContext context) {
      return MaterialApp(
         title: 'Hello World Demo Application', 
         theme: ThemeData( primarySwatch: Colors.blue,), 
         home: MyHomePage(title: 'Home page'), 
      ); 
   }
}
class MyHomePage extends StatelessWidget {
   MyHomePage({Key key, this.title}) : super(key: key); 
   final String title; 
   
   // user defined function 
   void _showDialog(BuildContext context) { 
      // flutter defined function showDialog( 
         context: context, builder: (BuildContext context) { 
            // return object of type Dialog return AlertDialog(
               title: new Text("Message"), 
               content: new Text("Hello World"),   
               actions: <Widget>[
                  new FlatButton(
                     child: new Text("Close"), 
                     onPressed: () {   
                        Navigator.of(context).pop();  
                     }, 
                  ), 
               ],
            );
         },
      );
   }
   @override 
   Widget build(BuildContext context) {
      return Scaffold(
         appBar: AppBar(title: Text(this.title),),
         body: Center(
            child: GestureDetector( 
               onTap: () {
                  _showDialog(context);
               },
            child: Text( 'Hello World', )
            )
         ),
      );
   }
}

最後，Flutter 還透過Listener Widget 提供了一種低階的手勢檢測機制。它將檢測所有使用者互動，然後分派以下事件：

PointerDownEvent
PointerMoveEvent
PointerUpEvent
PointerCancelEvent

Flutter 還提供了一小組 Widget 來執行特定和高階手勢。這些 Widget 列出如下：

Dismissible - 支援輕掃手勢來關閉 Widget。
Draggable - 支援拖動手勢來移動 Widget。
LongPressDraggable - 支援拖動手勢來移動 Widget，當其父 Widget 也是可拖動的時。
DragTarget - 接受任何Draggable Widget
IgnorePointer - 從手勢檢測過程中隱藏 Widget 及其子 Widget。
AbsorbPointer - 停止手勢檢測過程本身，因此任何重疊的 Widget 也無法參與手勢檢測過程，因此不會引發任何事件。
Scrollable - 支援滾動 Widget 內部可用的內容。

列印頁面