美文网首页
Flutter | 手势操作详解、单独一种类型的事件处理顺序、多

Flutter | 手势操作详解、单独一种类型的事件处理顺序、多

作者: 凌川江雪 | 来源:发表于2020-07-06 02:22 被阅读0次

    GestureDetector生命周期

    长按事件 案例

    GestureDetectorchild,用来放 需要实现 某种手势事件 的组件;
    【这里GestureDetector封装的是 显示 模拟手机号 的文本组件】:


    运行效果:
    【点击右侧的 某一个 Text组件】,可以看到相应的log信息被打印出来:
    可以看到相应的log信息被打印出来: 通过log,
    我们可以看到,长按的回调 是按下图的顺序 依次回调的: details封装的是点击点的坐标等信息【类似于Android的Event】:

    点击事件 案例

    代码更新:

    单击文本组件,log如下【可以看到相关回调方法的顺序】: 双击文本组件,log如下【可以看到相关回调方法的顺序(双击可能有两种回调顺序)】:

    长按事件 与 Pan事件 混合回调

    回调顺序:

    关键代码:

    GestureDetector gestureDetectorUsage1(int index) {
      return  GestureDetector(
        /*********************** 长按事件 *****************************/
                  onLongPress: (){
                    print('onLongPress');
                  },
                  onLongPressStart: (LongPressStartDetails details){
                    print(''
                        'onLongPressStart  点击处的坐标为:${details.globalPosition}  '
                        'x轴:${details.globalPosition.dx}   y轴坐标: ${details.globalPosition.dy}');
                  },
                  onLongPressMoveUpdate: (LongPressMoveUpdateDetails details){
                    print(''
                        'onLongPressMoveUpdate  点击处的坐标为:${details.globalPosition}  '
                        'x轴:${details.globalPosition.dx}   y轴坐标: ${details.globalPosition.dy}');
                  },
                  onLongPressUp: (){
                     print('onLongPressUp');
                  },
                  onLongPressEnd: (LongPressEndDetails details){
                    print(''
                        'onLongPressEnd  点击处的坐标为:${details.globalPosition}  '
                        'x轴:${details.globalPosition.dx}   y轴坐标: ${details.globalPosition.dy}');
                  },
        /*********************** 长按事件 *****************************/
    
        /*********************** Pan事件 *****************************/
          onPanDown: (DragDownDetails details){
            print(''
                'onPanDown  点击处的坐标为:${details.globalPosition}  '
                'x轴:${details.globalPosition.dx}   y轴坐标: ${details.globalPosition.dy}');
          },
    
          onPanStart: (DragStartDetails details){
            print(''
                'onPanStart  点击处的坐标为:${details.globalPosition}  '
                'x轴:${details.globalPosition.dx}   y轴坐标: ${details.globalPosition.dy}');
          },
    
          onPanUpdate: (DragUpdateDetails details){
            print(''
                'onPanStart  点击处的坐标为:${details.globalPosition}  '
                'x轴:${details.globalPosition.dx}   y轴坐标: ${details.globalPosition.dy}');
          },
    
          onPanEnd: (DragEndDetails details){
            print('onPanEnd  点击处的坐标为:${details.primaryVelocity.toString()}');
          },
    
          onPanCancel: (){
            print('onPanCancel');
          },
        /*********************** Pan事件 *****************************/
    
        //手势事件的 测试组件
          child:
          //显示 模拟手机号 的文本
          Text(
              '${numbers[index]}',
              style: TextStyle(
                color:Colors.orange,
                fontSize: 15,)
          )
      );
    }
    

    运行效果(圈起来的部分指的是一系列的onLongPressMoveUpdate())【运行后点击文本组件】:

    Tap事件 与 Pan事件 混合回调

    回调顺序:

    //Tab 与 Pan 混合
    GestureDetector gestureDetectorUsage2(int index) {
      return  GestureDetector(
        /*********************** Tap事件 *****************************/
          onTap: () {
            print('onTap');
          },
          onTapDown: (TapDownDetails details) {
            print(''
                'onTapDown  点击处的坐标为:${details.globalPosition}  '
                'x轴:${details.globalPosition.dx}   y轴坐标: ${details.globalPosition
                .dy}');
          },
    
          onTapUp: (TapUpDetails details) {
            print(''
                'onTapUp  点击处的坐标为:${details.globalPosition}  '
                'x轴:${details.globalPosition.dx}   y轴坐标: ${details.globalPosition
                .dy}');
          },
          onTapCancel: () {
            print('onTapCancel');
          },
          /*********************** Tap事件 *****************************/
    
          /*********************** Pan事件 *****************************/
          onPanDown: (DragDownDetails details){
            print(''
                'onPanDown  点击处的坐标为:${details.globalPosition}  '
                'x轴:${details.globalPosition.dx}   y轴坐标: ${details.globalPosition.dy}');
          },
    
          onPanStart: (DragStartDetails details){
            print(''
                'onPanStart  点击处的坐标为:${details.globalPosition}  '
                'x轴:${details.globalPosition.dx}   y轴坐标: ${details.globalPosition.dy}');
          },
    
          onPanUpdate: (DragUpdateDetails details){
            print(''
                'onPanStart  点击处的坐标为:${details.globalPosition}  '
                'x轴:${details.globalPosition.dx}   y轴坐标: ${details.globalPosition.dy}');
          },
    
          onPanEnd: (DragEndDetails details){
            print('onPanEnd  点击处的坐标为:${details.primaryVelocity.toString()}');
          },
    
          onPanCancel: (){
            print('onPanCancel');
          },
          /*********************** Pan事件 *****************************/
    
          //手势事件的 测试组件
          child:
          //显示 模拟手机号 的文本
          Text(
              '${numbers[index]}',
              style: TextStyle(
                color:Colors.orange,
                fontSize: 15,)
          )
      );
    }
    

    代码:


    运行效果:【运行后点击文本组件】

    垂直滑动事件 与 Pan事件 混合

    回调顺序:


    代码:
    //垂直滑动 与 Pan 混合
    GestureDetector gestureDetectorUsage3(int index) {
      return  GestureDetector(
        /*********************** 垂直滑动事件 *****************************/
          onVerticalDragDown: (DragDownDetails details){
            print(''
                'onVerticalDragDown  点击处的坐标为:${details.globalPosition}  '
                'x轴:${details.globalPosition.dx}   y轴坐标: ${details.globalPosition.dy}');
          },
          onVerticalDragStart:  (DragStartDetails details){
            print(''
                'onVerticalDragStart  点击处的坐标为:${details.globalPosition}  '
                'x轴:${details.globalPosition.dx}   y轴坐标: ${details.globalPosition.dy}');
          },
          onVerticalDragUpdate:  (DragUpdateDetails details){
            print(''
                'onVerticalDragUpdate  点击处的坐标为:${details.globalPosition}  '
                'x轴:${details.globalPosition.dx}   y轴坐标: ${details.globalPosition.dy}');
          },
          onVerticalDragEnd:  (DragEndDetails details){
            print(''
                'onVerticalDragEnd  点击处的坐标为:${details.velocity.toString()}  ');
          },
          onVerticalDragCancel: (){
            print('onVerticalDragCancel');
          },
          /*********************** 垂直滑动事件 *****************************/
    
          /*********************** Pan事件 *****************************/
          onPanDown: (DragDownDetails details){
            print(''
                'onPanDown  点击处的坐标为:${details.globalPosition}  '
                'x轴:${details.globalPosition.dx}   y轴坐标: ${details.globalPosition.dy}');
          },
    
          onPanStart: (DragStartDetails details){
            print(''
                'onPanStart  点击处的坐标为:${details.globalPosition}  '
                'x轴:${details.globalPosition.dx}   y轴坐标: ${details.globalPosition.dy}');
          },
    
          onPanUpdate: (DragUpdateDetails details){
            print(''
                'onPanStart  点击处的坐标为:${details.globalPosition}  '
                'x轴:${details.globalPosition.dx}   y轴坐标: ${details.globalPosition.dy}');
          },
    
          onPanEnd: (DragEndDetails details){
            print('onPanEnd  速度为:${details.primaryVelocity.toString()}');
          },
    
          onPanCancel: (){
            print('onPanCancel');
          },
          /*********************** Pan事件 *****************************/
    
          //手势事件的 测试组件
          child:
          //显示 模拟手机号 的文本
          Text(
              '${numbers[index]}',
              style: TextStyle(
                color:Colors.orange,
                fontSize: 15,)
          )
      );
    }
    
    运行效果:【运行后滑动文本组件】

    水平滑动事件 与 Pan事件 混合

    回调顺序:


    代码:
    //水平滑动 与 Pan 混合
    GestureDetector gestureDetectorUsage4(int index) {
      return  GestureDetector(
        /*********************** 水平滑动事件 *****************************/
          onHorizontalDragDown: (DragDownDetails details){
            print(''
                'onHorizontalDragDown  点击处的坐标为:${details.globalPosition}  '
                'x轴:${details.globalPosition.dx}   y轴坐标: ${details.globalPosition.dy}');
          },
          onHorizontalDragStart:  (DragStartDetails details){
            print(''
                'onHorizontalDragStart  点击处的坐标为:${details.globalPosition}  '
                'x轴:${details.globalPosition.dx}   y轴坐标: ${details.globalPosition.dy}');
          },
          onHorizontalDragUpdate:  (DragUpdateDetails details){
            print(''
                'onHorizontalDragUpdate  点击处的坐标为:${details.globalPosition}  '
                'x轴:${details.globalPosition.dx}   y轴坐标: ${details.globalPosition.dy}');
          },
          onHorizontalDragEnd:  (DragEndDetails details){
            print(''
                'onHorizontalDragEnd  速度为:${details.velocity.toString()}  ');
          },
          onHorizontalDragCancel: (){
            print('onHorizontalDragCancel');
          },
          /*********************** 水平滑动事件 *****************************/
    
          /*********************** Pan事件 *****************************/
          onPanDown: (DragDownDetails details){
            print(''
                'onPanDown  点击处的坐标为:${details.globalPosition}  '
                'x轴:${details.globalPosition.dx}   y轴坐标: ${details.globalPosition.dy}');
          },
    
          onPanStart: (DragStartDetails details){
            print(''
                'onPanStart  点击处的坐标为:${details.globalPosition}  '
                'x轴:${details.globalPosition.dx}   y轴坐标: ${details.globalPosition.dy}');
          },
    
          onPanUpdate: (DragUpdateDetails details){
            print(''
                'onPanStart  点击处的坐标为:${details.globalPosition}  '
                'x轴:${details.globalPosition.dx}   y轴坐标: ${details.globalPosition.dy}');
          },
    
          onPanEnd: (DragEndDetails details){
            print('onPanEnd  点击处的坐标为:${details.primaryVelocity.toString()}');
          },
    
          onPanCancel: (){
            print('onPanCancel');
          },
          /*********************** Pan事件 *****************************/
    
          //手势事件的 测试组件
          child:
          //显示 模拟手机号 的文本
          Text(
              '${numbers[index]}',
              style: TextStyle(
                color:Colors.orange,
                fontSize: 15,)
          )
      );
    }
    

    运行效果:【运行后滑动文本组件】

    Scale 事件 与 Tap事件 混合

    回调顺序:

    代码:

    // Scale事件 与 Tap事件 混合
    GestureDetector gestureDetectorUsage5(int index) {
      return  GestureDetector(
        /*********************** Tap事件 *****************************/
          onTap: () {
            print('onTap');
          },
          onTapDown: (TapDownDetails details) {
            print(''
                'onTapDown  点击处的坐标为:${details.globalPosition}  '
                'x轴:${details.globalPosition.dx}   y轴坐标: ${details.globalPosition
                .dy}');
          },
    
          onTapUp: (TapUpDetails details) {
            print(''
                'onTapUp  点击处的坐标为:${details.globalPosition}  '
                'x轴:${details.globalPosition.dx}   y轴坐标: ${details.globalPosition
                .dy}');
          },
          onTapCancel: () {
            print('onTapCancel');
          },
          /*********************** Tap事件 *****************************/
    
          /*********************** Scale事件 *****************************/
          onScaleStart: (ScaleStartDetails details){
            print(''
                'onScaleStart  点击处的坐标为:${details.localFocalPoint}  '
                'x轴:${details.localFocalPoint.dx}   y轴坐标: ${details.localFocalPoint.dy}');
          },
    
          onScaleUpdate: (ScaleUpdateDetails details){
            print(''
                'onScaleUpdate  点击处的坐标为:${details.localFocalPoint}  '
                'x轴:${details.localFocalPoint.dx}   y轴坐标: ${details.localFocalPoint.dy}');
          },
    
          onScaleEnd: (ScaleEndDetails details){
            print('onScaleEnd  点击处的坐标为:${details.toString()}');
          },
          /*********************** Scale事件 *****************************/
    
          //手势事件的 测试组件
          child:
          //显示 模拟手机号 的文本
          Text(
              '${numbers[index]}',
              style: TextStyle(
                color:Colors.orange,
                fontSize: 15,)
          )
      );
    }
    

    运行效果:【运行后滑动文本组件】

    双击、Tap、Pan事件混合

    回调顺序:


    代码:
    // 双击、 Tap 、Pan事件 混合
    GestureDetector gestureDetectorUsage6(int index) {
      return  GestureDetector(
        /*********************** Tap事件 *****************************/
          onDoubleTap: () {
            print('onDoubleTap');
          },
          onTap: () {
            print('onTap');
          },
          onTapDown: (TapDownDetails details) {
            print(''
                'onTapDown  点击处的坐标为:${details.globalPosition}  '
                'x轴:${details.globalPosition.dx}   y轴坐标: ${details.globalPosition
                .dy}');
          },
    
          onTapUp: (TapUpDetails details) {
            print(''
                'onTapUp  点击处的坐标为:${details.globalPosition}  '
                'x轴:${details.globalPosition.dx}   y轴坐标: ${details.globalPosition
                .dy}');
          },
          onTapCancel: () {
            print('onTapCancel');
          },
          /*********************** Tap事件 *****************************/
    
          /*********************** Pan事件 *****************************/
          onPanDown: (DragDownDetails details){
            print(''
                'onPanDown  点击处的坐标为:${details.globalPosition}  '
                'x轴:${details.globalPosition.dx}   y轴坐标: ${details.globalPosition.dy}');
          },
    
          onPanStart: (DragStartDetails details){
            print(''
                'onPanStart  点击处的坐标为:${details.globalPosition}  '
                'x轴:${details.globalPosition.dx}   y轴坐标: ${details.globalPosition.dy}');
          },
    
          onPanUpdate: (DragUpdateDetails details){
            print(''
                'onPanStart  点击处的坐标为:${details.globalPosition}  '
                'x轴:${details.globalPosition.dx}   y轴坐标: ${details.globalPosition.dy}');
          },
    
          onPanEnd: (DragEndDetails details){
            print('onPanEnd  点击处的坐标为:${details.primaryVelocity.toString()}');
          },
    
          onPanCancel: (){
            print('onPanCancel');
          },
          /*********************** Pan事件 *****************************/
    
          //手势事件的 测试组件
          child:
          //显示 模拟手机号 的文本
          Text(
              '${numbers[index]}',
              style: TextStyle(
                color:Colors.orange,
                fontSize: 15,)
          )
      );
    }
    

    运行效果:【运行后双击文本组件(单击则触发 Tap事件 与 Pan事件 混合回调)】







    参考自CSDN的Flutter入门课程

    import 'package:flutter/material.dart';
    
    class PageThree extends StatelessWidget {
      PageThree(this.data);
    
      String data;
    
      @override
      Widget build(BuildContext context) {
        return new Scaffold(
          appBar: new AppBar(
    //        title: new Text('目标页面'),
            title: new Text('P3.主页传过来的: $data'),
          ),
          //      body: RaisedButton(
          //        onPressed: () {
          //          print('打开了目标页面');
          //          Navigator.of(context).pop();
          //        },
          //        child: Text('返回上一个页面'),
          //      ),
          body: Contents(),
        );
      }
    }
    
    List<String> names = <String>[
      'zhangsan',
      'hello world',
      'banana',
      'lisi',
      'Peter',
      '老王',
      '卢老师',
      'TomCat',
      'HttpServer',
      '小明',
      '村口小卖部大叔',
      '修理空调张师傅',
      '小花',
      'Lilei',
      'HanMeimei',
    ];
    
    //模拟手机号
    List<String> numbers = <String>[
      '12345678900',
      '12345678901',
      '12345678902',
      '12345678903',
      '12345678904',
      '12345678905',
      '12366666666',
      '12345678907',
      '12345678908',
      '12345678906',
      '12345678910',
      '12345678911',
      '12345678912',
      '12345678913',
      '12345678914',
    ];
    
    class Contents extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return ListView.builder(
          padding: EdgeInsets.all(8.0),
          itemBuilder: (BuildContext context, int index) {
            return Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: <Widget>[
                RaisedButton(
                  onPressed: () {
                    print('返回上个页面');
    //                Navigator.of(context).pop();
                    // 把名字传过去
                    Navigator.of(context).pop('${names[index]}');
                  },
    
                  color: Colors.blueAccent,
                  child: Text('${names[index]}'),
                ),
    
                Divider(
                  height: 1,
                ),
    
                //使用手势
                // 使用 GestureDetector 把每一个Item 的 Text组件 给包括起来
    //            GestureDetector(
    //
    //              /*********************** 点击事件 *****************************/
    ////              onTap: (){
    ////                print('onTap');
    ////              },
    ////              onTapDown: (TapDownDetails details){
    ////                print(''
    ////                    'onTapDown  点击处的坐标为:${details.globalPosition}  '
    ////                    'x轴:${details.globalPosition.dx}   y轴坐标: ${details.globalPosition.dy}');
    ////              },
    ////
    ////              onTapUp: (TapUpDetails details){
    ////                print(''
    ////                    'onTapUp  点击处的坐标为:${details.globalPosition}  '
    ////                    'x轴:${details.globalPosition.dx}   y轴坐标: ${details.globalPosition.dy}');
    ////              },
    ////              onTapCancel: (){
    ////                print('onTapCancel');
    ////              },
    ////              onDoubleTap: (){
    ////                print('onDoubleTap');
    ////              },
    //              /*********************** 点击事件 *****************************/
    //
    //
    //              /*********************** 长按事件 *****************************/
    ////              onLongPress: (){
    ////                print('onLongPress');
    ////              },
    ////              onLongPressStart: (LongPressStartDetails details){
    ////                print(''
    ////                    'onLongPressStart  点击处的坐标为:${details.globalPosition}  '
    ////                    'x轴:${details.globalPosition.dx}   y轴坐标: ${details.globalPosition.dy}');
    ////              },
    ////              onLongPressMoveUpdate: (LongPressMoveUpdateDetails details){
    ////                print(''
    ////                    'onLongPressMoveUpdate  点击处的坐标为:${details.globalPosition}  '
    ////                    'x轴:${details.globalPosition.dx}   y轴坐标: ${details.globalPosition.dy}');
    ////              },
    ////              onLongPressUp: (){
    ////                 print('onLongPressUp');
    ////              },
    ////              onLongPressEnd: (LongPressEndDetails details){
    ////                print(''
    ////                    'onLongPressEnd  点击处的坐标为:${details.globalPosition}  '
    ////                    'x轴:${details.globalPosition.dx}   y轴坐标: ${details.globalPosition.dy}');
    ////              },
    //              /*********************** 长按事件 *****************************/
    //
    //              //手势事件的 测试组件
    //              child:
    //              //显示 模拟手机号 的文本
    //              Text(
    //                  '${numbers[index]}',
    //                 style: TextStyle(
    //                    color:Colors.orange,
    //                    fontSize: 15,)
    //                 )
    //              ),
    
    //            Text('${numbers[index]}'),
    
                //GestureDetector  混合使用
    //            gestureDetectorUsage1(index),
                gestureDetectorUsage6(index),
    
              ],
            );
          },
          itemCount: names.length,
        );
      }
    }
    
    /**
     * GestureDetector  混合使用
     *
     * index:数据索引
     */
    //长按 与 Pan 混合
    GestureDetector gestureDetectorUsage1(int index) {
      return  GestureDetector(
        /*********************** 长按事件 *****************************/
                  onLongPress: (){
                    print('onLongPress');
                  },
                  onLongPressStart: (LongPressStartDetails details){
                    print(''
                        'onLongPressStart  点击处的坐标为:${details.globalPosition}  '
                        'x轴:${details.globalPosition.dx}   y轴坐标: ${details.globalPosition.dy}');
                  },
                  onLongPressMoveUpdate: (LongPressMoveUpdateDetails details){
                    print(''
                        'onLongPressMoveUpdate  点击处的坐标为:${details.globalPosition}  '
                        'x轴:${details.globalPosition.dx}   y轴坐标: ${details.globalPosition.dy}');
                  },
                  onLongPressUp: (){
                     print('onLongPressUp');
                  },
                  onLongPressEnd: (LongPressEndDetails details){
                    print(''
                        'onLongPressEnd  点击处的坐标为:${details.globalPosition}  '
                        'x轴:${details.globalPosition.dx}   y轴坐标: ${details.globalPosition.dy}');
                  },
        /*********************** 长按事件 *****************************/
    
        /*********************** Pan事件 *****************************/
          onPanDown: (DragDownDetails details){
            print(''
                'onPanDown  点击处的坐标为:${details.globalPosition}  '
                'x轴:${details.globalPosition.dx}   y轴坐标: ${details.globalPosition.dy}');
          },
    
          onPanStart: (DragStartDetails details){
            print(''
                'onPanStart  点击处的坐标为:${details.globalPosition}  '
                'x轴:${details.globalPosition.dx}   y轴坐标: ${details.globalPosition.dy}');
          },
    
          onPanUpdate: (DragUpdateDetails details){
            print(''
                'onPanStart  点击处的坐标为:${details.globalPosition}  '
                'x轴:${details.globalPosition.dx}   y轴坐标: ${details.globalPosition.dy}');
          },
    
          onPanEnd: (DragEndDetails details){
            print('onPanEnd  点击处的坐标为:${details.primaryVelocity.toString()}');
          },
    
          onPanCancel: (){
            print('onPanCancel');
          },
        /*********************** Pan事件 *****************************/
    
        //手势事件的 测试组件
          child:
          //显示 模拟手机号 的文本
          Text(
              '${numbers[index]}',
              style: TextStyle(
                color:Colors.orange,
                fontSize: 15,)
          )
      );
    }
    
    //Tab 与 Pan 混合
    GestureDetector gestureDetectorUsage2(int index) {
      return  GestureDetector(
        /*********************** Tap事件 *****************************/
          onTap: () {
            print('onTap');
          },
          onTapDown: (TapDownDetails details) {
            print(''
                'onTapDown  点击处的坐标为:${details.globalPosition}  '
                'x轴:${details.globalPosition.dx}   y轴坐标: ${details.globalPosition
                .dy}');
          },
    
          onTapUp: (TapUpDetails details) {
            print(''
                'onTapUp  点击处的坐标为:${details.globalPosition}  '
                'x轴:${details.globalPosition.dx}   y轴坐标: ${details.globalPosition
                .dy}');
          },
          onTapCancel: () {
            print('onTapCancel');
          },
          /*********************** Tap事件 *****************************/
    
          /*********************** Pan事件 *****************************/
          onPanDown: (DragDownDetails details){
            print(''
                'onPanDown  点击处的坐标为:${details.globalPosition}  '
                'x轴:${details.globalPosition.dx}   y轴坐标: ${details.globalPosition.dy}');
          },
    
          onPanStart: (DragStartDetails details){
            print(''
                'onPanStart  点击处的坐标为:${details.globalPosition}  '
                'x轴:${details.globalPosition.dx}   y轴坐标: ${details.globalPosition.dy}');
          },
    
          onPanUpdate: (DragUpdateDetails details){
            print(''
                'onPanStart  点击处的坐标为:${details.globalPosition}  '
                'x轴:${details.globalPosition.dx}   y轴坐标: ${details.globalPosition.dy}');
          },
    
          onPanEnd: (DragEndDetails details){
            print('onPanEnd  点击处的坐标为:${details.primaryVelocity.toString()}');
          },
    
          onPanCancel: (){
            print('onPanCancel');
          },
          /*********************** Pan事件 *****************************/
    
          //手势事件的 测试组件
          child:
          //显示 模拟手机号 的文本
          Text(
              '${numbers[index]}',
              style: TextStyle(
                color:Colors.orange,
                fontSize: 15,)
          )
      );
    }
    
    //垂直滑动 与 Pan 混合
    GestureDetector gestureDetectorUsage3(int index) {
      return  GestureDetector(
        /*********************** 垂直滑动事件 *****************************/
          onVerticalDragDown: (DragDownDetails details){
            print(''
                'onVerticalDragDown  点击处的坐标为:${details.globalPosition}  '
                'x轴:${details.globalPosition.dx}   y轴坐标: ${details.globalPosition.dy}');
          },
          onVerticalDragStart:  (DragStartDetails details){
            print(''
                'onVerticalDragStart  点击处的坐标为:${details.globalPosition}  '
                'x轴:${details.globalPosition.dx}   y轴坐标: ${details.globalPosition.dy}');
          },
          onVerticalDragUpdate:  (DragUpdateDetails details){
            print(''
                'onVerticalDragUpdate  点击处的坐标为:${details.globalPosition}  '
                'x轴:${details.globalPosition.dx}   y轴坐标: ${details.globalPosition.dy}');
          },
          onVerticalDragEnd:  (DragEndDetails details){
            print(''
                'onVerticalDragEnd  速度为:${details.velocity.toString()}  ');
          },
          onVerticalDragCancel: (){
            print('onVerticalDragCancel');
          },
          /*********************** 垂直滑动事件 *****************************/
    
          /*********************** Pan事件 *****************************/
          onPanDown: (DragDownDetails details){
            print(''
                'onPanDown  点击处的坐标为:${details.globalPosition}  '
                'x轴:${details.globalPosition.dx}   y轴坐标: ${details.globalPosition.dy}');
          },
    
          onPanStart: (DragStartDetails details){
            print(''
                'onPanStart  点击处的坐标为:${details.globalPosition}  '
                'x轴:${details.globalPosition.dx}   y轴坐标: ${details.globalPosition.dy}');
          },
    
          onPanUpdate: (DragUpdateDetails details){
            print(''
                'onPanStart  点击处的坐标为:${details.globalPosition}  '
                'x轴:${details.globalPosition.dx}   y轴坐标: ${details.globalPosition.dy}');
          },
    
          onPanEnd: (DragEndDetails details){
            print('onPanEnd  点击处的坐标为:${details.primaryVelocity.toString()}');
          },
    
          onPanCancel: (){
            print('onPanCancel');
          },
          /*********************** Pan事件 *****************************/
    
          //手势事件的 测试组件
          child:
          //显示 模拟手机号 的文本
          Text(
              '${numbers[index]}',
              style: TextStyle(
                color:Colors.orange,
                fontSize: 15,)
          )
      );
    }
    
    //水平滑动 与 Pan 混合
    GestureDetector gestureDetectorUsage4(int index) {
      return  GestureDetector(
        /*********************** 水平滑动事件 *****************************/
          onHorizontalDragDown: (DragDownDetails details){
            print(''
                'onHorizontalDragDown  点击处的坐标为:${details.globalPosition}  '
                'x轴:${details.globalPosition.dx}   y轴坐标: ${details.globalPosition.dy}');
          },
          onHorizontalDragStart:  (DragStartDetails details){
            print(''
                'onHorizontalDragStart  点击处的坐标为:${details.globalPosition}  '
                'x轴:${details.globalPosition.dx}   y轴坐标: ${details.globalPosition.dy}');
          },
          onHorizontalDragUpdate:  (DragUpdateDetails details){
            print(''
                'onHorizontalDragUpdate  点击处的坐标为:${details.globalPosition}  '
                'x轴:${details.globalPosition.dx}   y轴坐标: ${details.globalPosition.dy}');
          },
          onHorizontalDragEnd:  (DragEndDetails details){
            print(''
                'onHorizontalDragEnd  速度为:${details.velocity.toString()}  ');
          },
          onHorizontalDragCancel: (){
            print('onHorizontalDragCancel');
          },
          /*********************** 水平滑动事件 *****************************/
    
          /*********************** Pan事件 *****************************/
          onPanDown: (DragDownDetails details){
            print(''
                'onPanDown  点击处的坐标为:${details.globalPosition}  '
                'x轴:${details.globalPosition.dx}   y轴坐标: ${details.globalPosition.dy}');
          },
    
          onPanStart: (DragStartDetails details){
            print(''
                'onPanStart  点击处的坐标为:${details.globalPosition}  '
                'x轴:${details.globalPosition.dx}   y轴坐标: ${details.globalPosition.dy}');
          },
    
          onPanUpdate: (DragUpdateDetails details){
            print(''
                'onPanStart  点击处的坐标为:${details.globalPosition}  '
                'x轴:${details.globalPosition.dx}   y轴坐标: ${details.globalPosition.dy}');
          },
    
          onPanEnd: (DragEndDetails details){
            print('onPanEnd  点击处的坐标为:${details.primaryVelocity.toString()}');
          },
    
          onPanCancel: (){
            print('onPanCancel');
          },
          /*********************** Pan事件 *****************************/
    
          //手势事件的 测试组件
          child:
          //显示 模拟手机号 的文本
          Text(
              '${numbers[index]}',
              style: TextStyle(
                color:Colors.orange,
                fontSize: 15,)
          )
      );
    }
    
    // Scale事件 与 Tap事件 混合
    GestureDetector gestureDetectorUsage5(int index) {
      return  GestureDetector(
        /*********************** Tap事件 *****************************/
          onTap: () {
            print('onTap');
          },
          onTapDown: (TapDownDetails details) {
            print(''
                'onTapDown  点击处的坐标为:${details.globalPosition}  '
                'x轴:${details.globalPosition.dx}   y轴坐标: ${details.globalPosition
                .dy}');
          },
    
          onTapUp: (TapUpDetails details) {
            print(''
                'onTapUp  点击处的坐标为:${details.globalPosition}  '
                'x轴:${details.globalPosition.dx}   y轴坐标: ${details.globalPosition
                .dy}');
          },
          onTapCancel: () {
            print('onTapCancel');
          },
          /*********************** Tap事件 *****************************/
    
          /*********************** Scale事件 *****************************/
          onScaleStart: (ScaleStartDetails details){
            print(''
                'onScaleStart  点击处的坐标为:${details.localFocalPoint}  '
                'x轴:${details.localFocalPoint.dx}   y轴坐标: ${details.localFocalPoint.dy}');
          },
    
          onScaleUpdate: (ScaleUpdateDetails details){
            print(''
                'onScaleUpdate  点击处的坐标为:${details.localFocalPoint}  '
                'x轴:${details.localFocalPoint.dx}   y轴坐标: ${details.localFocalPoint.dy}');
          },
    
          onScaleEnd: (ScaleEndDetails details){
            print('onScaleEnd  点击处的坐标为:${details.toString()}');
          },
          /*********************** Scale事件 *****************************/
    
          //手势事件的 测试组件
          child:
          //显示 模拟手机号 的文本
          Text(
              '${numbers[index]}',
              style: TextStyle(
                color:Colors.orange,
                fontSize: 15,)
          )
      );
    }
    
    // 双击、 Tap 、Pan事件 混合
    GestureDetector gestureDetectorUsage6(int index) {
      return  GestureDetector(
        /*********************** Tap事件 *****************************/
          onDoubleTap: () {
            print('onDoubleTap');
          },
          onTap: () {
            print('onTap');
          },
          onTapDown: (TapDownDetails details) {
            print(''
                'onTapDown  点击处的坐标为:${details.globalPosition}  '
                'x轴:${details.globalPosition.dx}   y轴坐标: ${details.globalPosition
                .dy}');
          },
    
          onTapUp: (TapUpDetails details) {
            print(''
                'onTapUp  点击处的坐标为:${details.globalPosition}  '
                'x轴:${details.globalPosition.dx}   y轴坐标: ${details.globalPosition
                .dy}');
          },
          onTapCancel: () {
            print('onTapCancel');
          },
          /*********************** Tap事件 *****************************/
    
          /*********************** Pan事件 *****************************/
          onPanDown: (DragDownDetails details){
            print(''
                'onPanDown  点击处的坐标为:${details.globalPosition}  '
                'x轴:${details.globalPosition.dx}   y轴坐标: ${details.globalPosition.dy}');
          },
    
          onPanStart: (DragStartDetails details){
            print(''
                'onPanStart  点击处的坐标为:${details.globalPosition}  '
                'x轴:${details.globalPosition.dx}   y轴坐标: ${details.globalPosition.dy}');
          },
    
          onPanUpdate: (DragUpdateDetails details){
            print(''
                'onPanStart  点击处的坐标为:${details.globalPosition}  '
                'x轴:${details.globalPosition.dx}   y轴坐标: ${details.globalPosition.dy}');
          },
    
          onPanEnd: (DragEndDetails details){
            print('onPanEnd  点击处的坐标为:${details.primaryVelocity.toString()}');
          },
    
          onPanCancel: (){
            print('onPanCancel');
          },
          /*********************** Pan事件 *****************************/
    
          //手势事件的 测试组件
          child:
          //显示 模拟手机号 的文本
          Text(
              '${numbers[index]}',
              style: TextStyle(
                color:Colors.orange,
                fontSize: 15,)
          )
      );
    }
    

    相关文章

      网友评论

          本文标题:Flutter | 手势操作详解、单独一种类型的事件处理顺序、多

          本文链接:https://www.haomeiwen.com/subject/xnnbfktx.html