[shutter] shutter gesture interaction (click event handling | click OnTap | double click | long press | click Cancel | press ontapdown | lift ontapup)

One 、Flutter Click event handling

---

Flutter The component of click event processing is GestureDetector Components ;

GestureDetector Options that can be set in the component , In the optional arguments in the constructor , Most of them are callback method setting fields ;

class GestureDetector extends StatelessWidget { 
      GestureDetector({ 
        Key key,    this.child,    this.onTapDown, //  Press down     this.onTapUp, //  lift     this.onTap, //  single click     this.onTapCancel, //  Click Cancel     this.onSecondaryTapDown,    this.onSecondaryTapUp,    this.onSecondaryTapCancel,    this.onDoubleTap, //  double-click     this.onLongPress, //  Long press     this.onLongPressStart,    this.onLongPressMoveUpdate,    this.onLongPressUp,    this.onLongPressEnd,    this.onVerticalDragDown,    this.onVerticalDragStart,    this.onVerticalDragUpdate,    this.onVerticalDragEnd,    this.onVerticalDragCancel,    this.onHorizontalDragDown,    this.onHorizontalDragStart,    this.onHorizontalDragUpdate,    this.onHorizontalDragEnd,    this.onHorizontalDragCancel,    this.onForcePressStart,    this.onForcePressPeak,    this.onForcePressUpdate,    this.onForcePressEnd,    this.onPanDown,    this.onPanStart,    this.onPanUpdate,    this.onPanEnd,    this.onPanCancel,    this.onScaleStart,    this.onScaleUpdate,    this.onScaleEnd,    this.behavior,    this.excludeFromSemantics = false,    this.dragStartBehavior = DragStartBehavior.start,  })}

GestureDetector Component usage :

• Set various callback events : stay onXxx Field to set various callback events , The field type is void Function() Type of ;
• Action component : stay child Field sets the main component of gesture detection , That is, which component's gesture event is monitored ;

//  Gesture detection component GestureDetector(  //  Click event   onTap: (){ 
        print(" double-click ");  },  //  Double-click the event   onDoubleTap: (){ 
        print(" double-click ");  },  //  Long press event  , ()=> Method name ( parameter list )  You can call back an existing method   onLongPress: () => _longPress(),  //  Click Cancel   onTapCancel: (){ 
        print(" Click Cancel ");  },  //  Click to press   onTapDown: (e){ 
        print(" Click to press ");  },  //  Click to lift   onTapUp: (e){ 
        print(" Click to lift ");  },  //  Action component of gesture detection  ,  Monitor various gestures on the component   child: Container(    //  The sub components are centered     alignment: Alignment.center,    //  padding     padding: EdgeInsets.all(100),    //  Background decoration     decoration: BoxDecoration(      color: Colors.green,    ),    child: Text(      " Gesture detection ",      style: TextStyle(        fontSize: 50,        color: Colors.red,      ),    ),  ),)

Two 、GestureDetector Description of common events

---

GestureDetector Description of common events :

• onTap : Click events ;
• onDoubleTap : Double-click the event ;
• onLongPress : Long press event ;
• onTapCancel : Click event cancel , A complete click event by pressing , lift form , If it has not been released after pressing , It becomes a long press operation , Click the event to cancel automatically ; If it slides out after pressing child Components , It will automatically become a click to cancel event ;
• onTapDown : Click press event ;
• onTapUp : Click lift event ;

3、 ... and 、 Complete code example

---

Complete code example :

import 'package:flutter/material.dart';class GesturePage extends StatefulWidget { 
      @override  _GesturePageState createState() => _GesturePageState();}class _GesturePageState extends State<GesturePage> { 
      @override  Widget build(BuildContext context) { 
        return MaterialApp(      //  Set the theme       theme: ThemeData(        primarySwatch: Colors.amber,      ),      //  Set the body component       home: Scaffold(        //  Set the title bar         appBar: AppBar(          title: Text(" Gesture detection "),          //  Back to button settings           leading: GestureDetector(            //  Click the event callback function             onTap: (){ 
                  //  Exit the current interface               Navigator.pop(context);            },            //  Back button icon             child: Icon(Icons.arrow_back),          ),        ),        //  level / Tile components vertically         body: FractionallySizedBox(          //  Tile horizontally           widthFactor: 1,          //  Frame layout           child: Stack(            children: <Widget>[              //  Vertical linear layout               Column(                children: <Widget>[                  //  Gesture detection component                   GestureDetector(                    //  Click event                     onTap: (){ 
                          print(" double-click ");                    },                    //  Double-click the event                     onDoubleTap: (){ 
                          print(" double-click ");                    },                    //  Long press event  , ()=> Method name ( parameter list )  You can call back an existing method                     onLongPress: () => _longPress(),                    //  Click Cancel                     onTapCancel: (){ 
                          print(" Click Cancel ");                    },                    //  Click to press                     onTapDown: (e){ 
                          print(" Click to press ");                    },                    //  Click to lift                     onTapUp: (e){ 
                          print(" Click to lift ");                    },                    //  Action component of gesture detection  ,  Monitor various gestures on the component                     child: Container(                      //  The sub components are centered                       alignment: Alignment.center,                      //  padding                       padding: EdgeInsets.all(100),                      //  Background decoration                       decoration: BoxDecoration(                        color: Colors.green,                      ),                      child: Text(                        " Gesture detection ",                        style: TextStyle(                          fontSize: 50,                          color: Colors.red,                        ),                      ),                    ),                  )                ],              )            ],          ),        ),      ),    );  }  ///  Long press event   void _longPress(){ 
        print(" Long press ");  }}

Operation effect display :

Print the results :

2021-03-02 20:26:54.072 15660-15678/com.example.flutter_cmd I/flutter:  Click to press 2021-03-02 20:26:54.073 15660-15678/com.example.flutter_cmd I/flutter:  Click to lift 2021-03-02 20:26:54.073 15660-15678/com.example.flutter_cmd I/flutter:  double-click 2021-03-02 20:26:58.229 15660-15678/com.example.flutter_cmd I/flutter:  Click to press 2021-03-02 20:26:58.229 15660-15678/com.example.flutter_cmd I/flutter:  Click to lift 2021-03-02 20:26:58.229 15660-15678/com.example.flutter_cmd I/flutter:  double-click 2021-03-02 20:26:59.279 15660-15678/com.example.flutter_cmd I/flutter:  Click to press 2021-03-02 20:26:59.682 15660-15678/com.example.flutter_cmd I/flutter:  Click Cancel 2021-03-02 20:26:59.682 15660-15678/com.example.flutter_cmd I/flutter:  Long press 2021-03-02 20:27:02.233 15660-15678/com.example.flutter_cmd I/flutter:  Click to press 2021-03-02 20:27:02.284 15660-15678/com.example.flutter_cmd I/flutter:  Click Cancel 2021-03-02 20:27:02.634 15660-15678/com.example.flutter_cmd I/flutter:  Long press 2021-03-02 20:27:04.465 15660-15678/com.example.flutter_cmd I/flutter:  Click to press 2021-03-02 20:27:04.465 15660-15678/com.example.flutter_cmd I/flutter:  Click to lift 2021-03-02 20:27:04.465 15660-15678/com.example.flutter_cmd I/flutter:  double-click 

Four 、 Related resources

---

Reference material :

• Flutter Official website : https://flutter.dev/
• Flutter Developing documents : https://flutter.cn/docs ( Strongly recommend )
• official GitHub Address : https://github.com/flutter
• Flutter The Chinese community : https://flutter.cn/
• Flutter Practical tutorial : https://flutter.cn/docs/cookbook
• Flutter CodeLab : https://codelabs.flutter-io.cn/
• Dart Chinese document : https://dart.cn/
• Dart Developer website : https://api.dart.dev/
• Flutter Chinese net ( unofficial , The translation is very good ) : https://flutterchina.club/ , http://flutter.axuer.com/docs/
• Flutter Related issues : https://flutterchina.club/faq/ ( It is recommended to watch it at the introductory stage )

Blog source download :

• GitHub Address : https://github.com/han1202012/flutter_cmd ( Keep updating with the progress of the blog , There may not be the source code of this blog )

• Blog source snapshot : https://download.csdn.net/download/han1202012/15484718 ( The source code snapshot of this blog , You can find the source code of this blog )