Flutter - Wprowadzenie do gestów

Gesty są przede wszystkim sposobem interakcji użytkownika z aplikacją mobilną (lub dowolnym urządzeniem dotykowym). Gesty są ogólnie definiowane jako dowolne fizyczne działanie / ruch użytkownika w zamiarze aktywowania określonej kontroli urządzenia mobilnego. Gesty są tak proste, jak dotknięcie ekranu urządzenia mobilnego, aby wykonać bardziej złożone czynności używane w aplikacjach do gier.

W tym miejscu wymieniono niektóre z powszechnie używanych gestów -

Tap - Krótkie dotknięcie powierzchni urządzenia opuszkiem palca, a następnie puszczenie opuszki.
Double Tap - Dwukrotne stukanie w krótkim czasie.
Drag - Dotknięcie powierzchni urządzenia opuszkiem palca, a następnie równomierne poruszenie opuszkiem, a na koniec zwolnienie opuszki.
Flick - Podobny do przeciągania, ale robiąc to w szybszy sposób.
Pinch - Ściskanie powierzchni urządzenia dwoma palcami.
Spread/Zoom - Przeciwieństwo szczypania.
Panning - Dotykanie powierzchni urządzenia opuszkiem palca i przesuwanie go w dowolnym kierunku bez puszczania opuszki.

Flutter zapewnia doskonałe wsparcie dla wszystkich rodzajów gestów dzięki ekskluzywnemu widżetowi, GestureDetector. GestureDetector to niewizualny widżet używany głównie do wykrywania gestów użytkownika. Aby zidentyfikować gest skierowany na widget, widget można umieścić wewnątrz widgetu GestureDetector. GestureDetector przechwyci gest i wywoła wiele zdarzeń na podstawie gestu.

Niektóre z gestów i odpowiadające im zdarzenia podano poniżej -

onTapDown
onTapUp
onTap
onTapCancel

Podwójne wciśnięcie

onDoubleTap

Długie naciśnięcie

onLongPress

Przeciągnij w pionie

onVerticalDragStart
onVerticalDragUpdate
onVerticalDragEnd

Przeciąganie w poziomie

onHorizontalDragStart
onHorizontalDragUpdate
onHorizontalDragEnd

onPanStart
onPanUpdate
onPanEnd

Teraz zmodyfikujmy aplikację hello world, aby zawierała funkcję wykrywania gestów i spróbujmy zrozumieć koncepcję.

Zmień treść widżetu MyHomePage, jak pokazano poniżej -

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

Zwróć uwagę, że tutaj umieściliśmy widget GestureDetector powyżej widgetu Tekst w hierarchii widgetów, przechwyciliśmy zdarzenie onTap, a na koniec pokazaliśmy okno dialogowe.
Zaimplementuj funkcję * _showDialog *, aby wyświetlić okno dialogowe, gdy użytkownik przejdzie do wiadomości hello world . Używa ogólnego widżetu showDialog i AlertDialog do tworzenia nowego widżetu okna dialogowego. Kod pokazano poniżej -

// 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();  
                  }, 
               ), 
            ], 
         ); 
      }, 
   ); 
}

Aplikacja załaduje się ponownie w urządzeniu za pomocą funkcji Hot Reload. Teraz wystarczy kliknąć wiadomość Hello World, a pojawi się poniższe okno dialogowe -

Teraz zamknij okno dialogowe, klikając opcję zamykania w oknie dialogowym.

Kompletny kod (main.dart) wygląda następująco -

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', )
            )
         ),
      );
   }
}

Wreszcie Flutter zapewnia również mechanizm wykrywania gestów niskiego poziomu za pośrednictwem widżetu Listener . Wykryje wszystkie interakcje użytkownika, a następnie wysyła następujące zdarzenia -

PointerDownEvent
PointerMoveEvent
PointerUpEvent
PointerCancelEvent

Flutter zapewnia również niewielki zestaw widżetów do wykonywania określonych i zaawansowanych gestów. Widżety są wymienione poniżej -

Dismissible - Obsługuje gest szybkiego ruchu, aby odrzucić widżet.
Draggable - Obsługuje gest przeciągania, aby przesunąć widżet.
LongPressDraggable - Obsługuje gest przeciągania, aby przenieść widżet, gdy jego widżet nadrzędny również można przeciągać.
DragTarget- Akceptuje dowolny widget Draggable
IgnorePointer - Ukrywa widżet i jego elementy podrzędne przed procesem wykrywania gestów.
AbsorbPointer - Zatrzymuje sam proces wykrywania gestów, a zatem każdy nakładający się widżet również nie może uczestniczyć w procesie wykrywania gestów, a zatem żadne zdarzenie nie jest zgłaszane.
Scrollable - Wsparcie przewijania treści dostępnych wewnątrz widżetu.