Flutter - Введение в жесты

Жесты - это, прежде всего, способ взаимодействия пользователя с мобильным (или любым сенсорным устройством) приложением. Жесты обычно определяются как любое физическое действие / движение пользователя с намерением активировать определенный элемент управления мобильным устройством. Жесты так же просты, как касание экрана мобильного устройства для более сложных действий, используемых в игровых приложениях.

Здесь упоминаются некоторые из широко используемых жестов -

Tap - Прикоснитесь к поверхности устройства кончиком пальца на короткое время, а затем отпустите кончик пальца.
Double Tap - Двойное нажатие за короткое время.
Drag - Касание поверхности устройства кончиком пальца, затем устойчивое движение кончиком пальца и, наконец, отпускание кончика пальца.
Flick - Подобно перетаскиванию, но делает это быстрее.
Pinch - Зажмите поверхность устройства двумя пальцами.
Spread/Zoom - Противоположность защемлению.
Panning - Касаясь поверхности устройства кончиком пальца и перемещая его в любом направлении, не отпуская кончика пальца.

Flutter обеспечивает отличную поддержку всех типов жестов через свой эксклюзивный виджет, GestureDetector. GestureDetector - это невизуальный виджет, который в основном используется для обнаружения жестов пользователя. Чтобы идентифицировать жест, нацеленный на виджет, виджет можно поместить внутри виджета GestureDetector. GestureDetector захватит жест и отправит несколько событий на основе жеста.

Некоторые жесты и соответствующие события приведены ниже -

onTapDown
onTapUp
onTap
onTapCancel

Двойное нажатие

onDoubleTap

Долгое нажатие

onLongPress

Вертикальное сопротивление

onVerticalDragStart
onVerticalDragUpdate
onVerticalDragEnd

Горизонтальное сопротивление

onHorizontalDragStart
onHorizontalDragUpdate
onHorizontalDragEnd

onPanStart
onPanUpdate
onPanEnd

Теперь давайте изменим приложение hello world, включив в него функцию обнаружения жестов, и попытаемся понять концепцию.

Измените содержимое тела виджета MyHomePage, как показано ниже -

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

Обратите внимание, что здесь мы разместили виджет GestureDetector над виджетом Text в иерархии виджетов, зафиксировали событие 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();  
                  }, 
               ), 
            ], 
         ); 
      }, 
   ); 
}

Приложение перезагрузится на устройстве с помощью функции Hot Reload. Теперь просто щелкните сообщение 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 . Он обнаружит все взаимодействия с пользователем, а затем отправит следующие события:

PointerDownEvent
PointerMoveEvent
PointerUpEvent
PointerCancelEvent

Flutter также предоставляет небольшой набор виджетов для выполнения конкретных, а также расширенных жестов. Виджеты перечислены ниже -

Dismissible - Поддерживает жест пролистывания, чтобы закрыть виджет.
Draggable - Поддерживает жест перетаскивания для перемещения виджета.
LongPressDraggable - Поддерживает жест перетаскивания для перемещения виджета, когда его родительский виджет также можно перетаскивать.
DragTarget- Принимает любой перетаскиваемый виджет
IgnorePointer - Скрывает виджет и его дочерние элементы от процесса обнаружения жестов.
AbsorbPointer - Останавливает сам процесс обнаружения жестов, поэтому любой перекрывающийся виджет также не может участвовать в процессе обнаружения жестов, и, следовательно, событие не возникает.
Scrollable - Поддержка прокрутки содержимого, доступного внутри виджета.