Flutter - 手势简介

手势主要是用户与移动（或任何基于触摸的设备）应用程序交互的一种方式。手势通常被定义为用户意图激活移动设备的特定控制的任何物理动作/移动。手势就像点击移动设备的屏幕一样简单，也可以在游戏应用程序中使用更复杂的操作。

这里提到了一些广泛使用的手势 -

点击- 用指尖短时间触摸设备表面，然后松开指尖。
双击- 短时间内点击两次。
拖动- 用指尖触摸设备表面，然后稳定地移动指尖，最后松开指尖。
轻拂- 与拖动类似，但速度更快。
捏- 用两根手指捏住设备的表面。
展开/缩放- 与捏合相反。
平移- 用指尖触摸设备表面并在不松开指尖的情况下向任意方向移动设备。

Flutter 通过其独有的小部件GestureDetector为所有类型的手势提供了出色的支持。GestureDetector 是一个非视觉小部件，主要用于检测用户的手势。要识别针对小部件的手势，可以将该小部件放置在 GestureDetector 小部件内。GestureDetector 将捕获手势并根据手势调度多个事件。

下面给出了一些手势和相应的事件 -

轻敲

按下按钮
点击向上
点按
点击取消

双击

双击

长按

长按时

垂直拖动

onVerticalDragStart
onVerticalDragUpdate
onVerticalDragEnd

水平拖动

onHorizontalDragStart
onHorizontalDragUpdate
onHorizontalDragEnd

平底锅

平移启动
泛更新
平移结束

现在，让我们修改 hello world 应用程序以包含手势检测功能并尝试理解这个概念。

更改MyHomePage小部件的正文内容，如下所示 -

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

请注意，这里我们已将GestureDetector小部件放置在小部件层次结构中的“文本”小部件之上，捕获 onTap 事件，然后最终显示一个对话框窗口。
实现 *_showDialog* 函数以在用户点击hello world 消息时显示一个对话框。它使用通用的showDialog和AlertDialog小部件来创建新的对话框小部件。代码如下所示 -

// 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小部件提供了低级手势检测机制。它将检测所有用户交互，然后调度以下事件 -

指针向下事件
指针移动事件
指针向上事件
指针取消事件

Flutter 还提供了一小组小部件来执行特定的高级手势。下面列出了小部件 -

可关闭- 支持轻拂手势来关闭小部件。
Draggable - 支持拖动手势来移动小部件。
LongPressDraggable - 当其父窗口小部件也可拖动时，支持拖动手势来移动窗口小部件。
DragTarget - 接受任何可拖动的小部件
IgnorePointer - 在手势检测过程中隐藏小部件及其子部件。
AbsorbPointer - 停止手势检测过程本身，因此任何重叠的小部件也无法参与手势检测过程，因此不会引发任何事件。
可滚动- 支持滚动小部件内可用的内容。