Flattern - Einführung in Gesten

Gesten sind in erster Linie eine Möglichkeit für einen Benutzer, mit einer mobilen Anwendung (oder einem berührungsbasierten Gerät) zu interagieren. Gesten werden im Allgemeinen als jede physische Handlung / Bewegung eines Benutzers definiert, um eine bestimmte Steuerung des mobilen Geräts zu aktivieren. Gesten sind so einfach wie das Tippen auf den Bildschirm des Mobilgeräts, um komplexere Aktionen auszuführen, die in Spieleanwendungen verwendet werden.

Einige der weit verbreiteten Gesten werden hier erwähnt -

Tap - Berühren Sie kurz die Oberfläche des Geräts mit der Fingerspitze und lassen Sie dann die Fingerspitze los.
Double Tap - Zweimal in kurzer Zeit tippen.
Drag - Berühren Sie die Oberfläche des Geräts mit der Fingerspitze, bewegen Sie die Fingerspitze gleichmäßig und lassen Sie die Fingerspitze schließlich los.
Flick - Ähnlich wie beim Ziehen, aber auf eine schnellere Art und Weise.
Pinch - Drücken Sie mit zwei Fingern auf die Oberfläche des Geräts.
Spread/Zoom - Gegenüber dem Kneifen.
Panning - Berühren Sie die Oberfläche des Geräts mit der Fingerspitze und bewegen Sie es in eine beliebige Richtung, ohne die Fingerspitze loszulassen.

Flutter bietet durch sein exklusives Widget eine hervorragende Unterstützung für alle Arten von Gesten. GestureDetector. GestureDetector ist ein nicht visuelles Widget, das hauptsächlich zum Erkennen der Geste des Benutzers verwendet wird. Um eine Geste zu identifizieren, die auf ein Widget abzielt, kann das Widget im GestureDetector-Widget platziert werden. GestureDetector erfasst die Geste und sendet basierend auf der Geste mehrere Ereignisse aus.

Einige der Gesten und die entsprechenden Ereignisse sind unten angegeben -

onTapDown
onTapUp
onTap
onTapCancel

Doppeltippen

onDoubleTap

Lange drücken

onLongPress

Vertikaler Widerstand

onVerticalDragStart
onVerticalDragUpdate
onVerticalDragEnd

Horizontales Ziehen

onHorizontalDragStart
onHorizontalDragUpdate
onHorizontalDragEnd

onPanStart
onPanUpdate
onPanEnd

Lassen Sie uns nun die Hallo-Welt-Anwendung so ändern, dass sie eine Gestenerkennungsfunktion enthält, und versuchen, das Konzept zu verstehen.

Ändern Sie den Hauptinhalt des MyHomePage- Widgets wie unten gezeigt -

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

Beachten Sie, dass wir hier das GestureDetector- Widget über dem Text-Widget in der Widget-Hierarchie platziert, das onTap-Ereignis erfasst und schließlich ein Dialogfenster angezeigt haben.
Implementieren Sie die Funktion * _showDialog *, um einen Dialog anzuzeigen, wenn der Benutzer die Nachricht "Hallo Welt" auf die Registerkarte setzt . Es verwendet das generische Widget showDialog und AlertDialog , um ein neues Dialog-Widget zu erstellen. Der Code wird unten angezeigt -

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

Die Anwendung wird mithilfe der Hot-Reload-Funktion auf dem Gerät neu geladen. Klicken Sie nun einfach auf die Nachricht "Hallo Welt" und der folgende Dialog wird angezeigt:

Schließen Sie nun den Dialog, indem Sie im Dialog auf die Option zum Schließen klicken .

Der vollständige Code (main.dart) lautet wie folgt:

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

Schließlich bietet Flutter über das Listener- Widget auch einen Mechanismus zur Erkennung von Gesten auf niedriger Ebene . Es erkennt alle Benutzerinteraktionen und löst dann die folgenden Ereignisse aus:

PointerDownEvent
PointerMoveEvent
PointerUpEvent
PointerCancelEvent

Flutter bietet auch eine kleine Reihe von Widgets für bestimmte und erweiterte Gesten. Die Widgets sind unten aufgeführt -

Dismissible - Unterstützt die Flick-Geste, um das Widget zu schließen.
Draggable - Unterstützt die Drag-Geste zum Verschieben des Widgets.
LongPressDraggable - Unterstützt die Drag-Geste zum Verschieben eines Widgets, wenn das übergeordnete Widget ebenfalls ziehbar ist.
DragTarget- Akzeptiert alle ziehbaren Widgets
IgnorePointer - Blendet das Widget und seine untergeordneten Elemente vor dem Gestenerkennungsprozess aus.
AbsorbPointer - Stoppt den Gestenerkennungsprozess selbst, sodass überlappende Widgets auch nicht am Gestenerkennungsprozess teilnehmen können und daher kein Ereignis ausgelöst wird.
Scrollable - Unterstützt das Scrollen des im Widget verfügbaren Inhalts.