• Flutter手势--GestureDetector各种手势使用详情

    1.GestureDetector单击手势

    序列号字段属性描述
    1onTapDownGestureTapDownCallback手指按下时的回调函数
    2onTapUpGestureTapUpCallback手指松开时的回调函数
    3onTapGestureTapCallback手指点击时的回调函数
    4onTapCancelGestureTapCancelCallback手指取消点击时的回调函数

    我们在Container容器上添加了单击手势，代码如下：

    1. import 'package:flutter/material.dart';
    2.  
    3. class GestureDetectorExample extends StatefulWidget {
    4.   @override
    5.   _GestureDetectorExampleState createState() => _GestureDetectorExampleState();
    6. }
    7.  
    8. class _GestureDetectorExampleState extends State<GestureDetectorExample> {
    9.  
    10.   @override
    11.   Widget build(BuildContext context) {
    12.     return Scaffold(
    13.       appBar: AppBar(
    14.         title: Text("GestureDetector"),
    15.       ),
    16.       body: Center(
    17.         child: Stack(
    18.           children: [
    19.             GestureDetector(
    20.               onTap: (){
    21.                 print("onTap");
    22.               },
    23.               onTapCancel: () {
    24.                 print("onTapCancel");
    25.               },
    26.               onTapDown: (details) {
    27.                 print("onTapDown---${details.globalPosition}---${details.localPosition}");
    28.               },
    29.               onTapUp: (details) {
    30.                 print("onTapUp---${details.globalPosition}---${details.localPosition}");
    31.               },
    32.               child: Container(
    33.                 width: 200,
    34.                 height: 200,
    35.                 color: Colors.orange,
    36.                 alignment: Alignment.center,
    37.                 child: Text("Jimi",
    38.                   style: TextStyle(
    39.                     color: Colors.white,
    40.                     fontSize: 30
    41.                   ),
    42.                 ),
    43.               ),
    44.             )
    45.           ],
    46.         ),
    47.       ),
    48.     );
    49.   }
    50. }

    GestureDetector单击手势控制台输出结果

    第一种：点击Container容器

    1. flutter: onTapDown---Offset(211.5, 317.0)---Offset(124.0, 45.5)
    2. flutter: onTapUp---Offset(211.5, 317.0)---Offset(124.0, 45.5)
    3. flutter: onTap

    第二种：点击Container容器后不松手直接移出区域

    1. flutter: onTapDown---Offset(195.5, 305.5)---Offset(108.0, 34.0)
    2. flutter: onTapCancel

    2.GestureDetector双击手势

    序列号字段属性描述
    1onDoubleTapDownGestureTapDownCallback手指按下时的回调函数
    2onDoubleTapGestureTapCallback手指双击时的回调函数
    3onDoubleTapCancelGestureTapCancelCallback手指取消时的回调函数

    我们在Container容器上添加了三种双击手势的回调，代码如下：

    1. import 'package:flutter/material.dart';
    2.  
    3. class GestureDetectorExample extends StatefulWidget {
    4.   @override
    5.   _GestureDetectorExampleState createState() => _GestureDetectorExampleState();
    6. }
    7.  
    8. class _GestureDetectorExampleState extends State<GestureDetectorExample> {
    9.  
    10.   @override
    11.   Widget build(BuildContext context) {
    12.     return Scaffold(
    13.       appBar: AppBar(
    14.         title: Text("GestureDetector"),
    15.       ),
    16.       body: Center(
    17.         child: Stack(
    18.           children: [
    19.             GestureDetector(
    20.               onDoubleTap: () {
    21.                 print("onTapDown");
    22.               },
    23.               onDoubleTapCancel: () {
    24.                 print("onDoubleTapCancel");
    25.               },
    26.               onDoubleTapDown: (details) {
    27.                 print("onDoubleTapDown---${details.globalPosition}---${details.localPosition}");
    28.               },
    29.               child: Container(
    30.                 width: 200,
    31.                 height: 200,
    32.                 color: Colors.orange,
    33.                 alignment: Alignment.center,
    34.                 child: Text("Jimi",
    35.                   style: TextStyle(
    36.                       color: Colors.white,
    37.                       fontSize: 30
    38.                   ),
    39.                 ),
    40.               ),
    41.             )
    42.           ],
    43.         ),
    44.       ),
    45.     );
    46.   }
    47. }

    GestureDetector双击手势控制台输出结果

    第一种：双击Container容器

    1. flutter: onDoubleTapDown---Offset(204.5, 317.0)---Offset(117.0, 45.5)
    2. flutter: onTapDown

    第二种：双击Container容器但不抬起手指并移出区域

    1. flutter: onDoubleTapDown---Offset(195.5, 283.5)---Offset(108.0, 12.0)
    2. flutter: onDoubleTapCancel

    3.GestureDetector长按手势

    序列号字段属性描述
    1onLongPressDownGestureLongPressDownCallback手指按下去时的回调函数
    2onLongPressCancelGestureLongPressCancelCallback手指长按取消时的回调函数
    3onLongPressGestureLongPressCallback手指长按时的回调函数
    4onLongPressStartGestureLongPressStartCallback手指长按并开始拖动时的回调函数
    5onLongPressMoveUpdateGestureLongPressMoveUpdateCallback手指长按并移动时的回调函数
    6onLongPressUpGestureLongPressUpCallback手指长按并松开时的回调函数
    7onLongPressEndGestureLongPressEndCallback手指长按结束拖动时的回调函数

    我们在Container容器上添加了长按手势，代码如下：

    1. import 'package:flutter/material.dart';
    2.  
    3. class GestureDetectorExample extends StatefulWidget {
    4.   @override
    5.   _GestureDetectorExampleState createState() => _GestureDetectorExampleState();
    6. }
    7.  
    8. class _GestureDetectorExampleState extends State<GestureDetectorExample> {
    9.  
    10.   @override
    11.   Widget build(BuildContext context) {
    12.     return Scaffold(
    13.       appBar: AppBar(
    14.         title: Text("GestureDetector"),
    15.       ),
    16.       body: Center(
    17.         child: Stack(
    18.           children: [
    19.             GestureDetector(
    20.               onLongPress: (){
    21.                 print("onLongPress");
    22.               },
    23.               onLongPressCancel: () {
    24.                 print("onLongPressCancel");
    25.               },
    26.               onLongPressUp: () {
    27.                 print("onLongPressUp");
    28.               },
    29.               onLongPressDown: (details) {
    30.                 print("onLongPressDown---${details.globalPosition}---${details.localPosition}");
    31.               },
    32.               onLongPressEnd: (details) {
    33.                 print("onLongPressEnd---${details.globalPosition}---${details.localPosition}");
    34.               },
    35.               onLongPressStart: (details) {
    36.                 print("onLongPressStart---${details.globalPosition}---${details.localPosition}");
    37.               },
    38.               onLongPressMoveUpdate: (details) {
    39.                 print("onLongPressMoveUpdate---${details.globalPosition}---${details.localPosition}");
    40.               },
    41.               child: Container(
    42.                 width: 200,
    43.                 height: 200,
    44.                 color: Colors.orange,
    45.                 alignment: Alignment.center,
    46.                 child: Text("Jimi",
    47.                   style: TextStyle(
    48.                     color: Colors.white,
    49.                     fontSize: 30
    50.                   ),
    51.                 ),
    52.               ),
    53.             )
    54.           ],
    55.         ),
    56.       ),
    57.     );
    58.   }
    59. }

    GestureDetector长按手势控制台输出结果

    第一种：单击Container容器

    1. flutter: onLongPressDown---Offset(199.0, 336.0)---Offset(111.5, 64.5)
    2. flutter: onLongPressCancel

    第二种：长按Container容器但是手指不动后松开

    1. flutter: onLongPressDown---Offset(215.0, 301.0)---Offset(127.5, 29.5)
    2. flutter: onLongPressStart---Offset(215.0, 301.0)---Offset(127.5, 29.5)
    3. flutter: onLongPress
    4. flutter: onLongPressEnd---Offset(215.0, 301.0)---Offset(127.5, 29.5)
    5. flutter: onLongPressUp

    第三种：长按Container容器并进行拖动最后松开手指

    1. flutter: onLongPressDown---Offset(169.0, 314.0)---Offset(81.5, 42.5)
    2. flutter: onLongPressStart---Offset(169.0, 314.0)---Offset(81.5, 42.5)
    3. flutter: onLongPress
    4. flutter: onLongPressMoveUpdate---Offset(168.5, 314.5)---Offset(81.0, 43.0)
    5. flutter: onLongPressMoveUpdate---Offset(165.0, 318.5)---Offset(77.5, 47.0)
    6. flutter: onLongPressMoveUpdate---Offset(164.0, 319.0)---Offset(76.5, 47.5)
    7. flutter: onLongPressMoveUpdate---Offset(158.5, 323.5)---Offset(71.0, 52.0)
    8. flutter: onLongPressMoveUpdate---Offset(153.0, 329.5)---Offset(65.5, 58.0)
    9. flutter: onLongPressMoveUpdate---Offset(148.5, 335.0)---Offset(61.0, 63.5)
    10. flutter: onLongPressMoveUpdate---Offset(146.5, 339.0)---Offset(59.0, 67.5)
    11. flutter: onLongPressMoveUpdate---Offset(146.5, 339.5)---Offset(59.0, 68.0)
    12. flutter: onLongPressEnd---Offset(146.5, 339.5)---Offset(59.0, 68.0)
    13. flutter: onLongPressUp

    第四种：长按Container容器并马上移出区域

    1. flutter: onLongPressDown---Offset(97.0, 277.5)---Offset(9.5, 6.0)
    2. flutter: onLongPressCancel
    3. flutter: onLongPressDown---Offset(91.5, 275.5)---Offset(4.0, 4.0)
    4. flutter: onLongPressCancel

    4.GestureDetector垂直滑动手势

    序列号字段属性描述
    1onVerticalDragDownGestureDragDownCallback手指按下时的回调函数
    2onVerticalDragStartGestureDragStartCallback手指开始垂直滑动时的回调函数
    3onVerticalDragUpdateGestureDragUpdateCallback手指垂直滑动时的回调函数
    4onVerticalDragEndGestureDragEndCallback手指垂直滑动结束时的回调函数
    5onVerticalDragCancelGestureDragCancelCallback手指垂直滑动取消时的回调函数

    我们在Container容器上添加了垂直滑动手势，代码如下：

    1. import 'package:flutter/material.dart';
    2.  
    3. class GestureDetectorExample extends StatefulWidget {
    4.   @override
    5.   _GestureDetectorExampleState createState() => _GestureDetectorExampleState();
    6. }
    7.  
    8. class _GestureDetectorExampleState extends State<GestureDetectorExample> {
    9.  
    10.   double _left = 0;
    11.   double _top = 0;
    12.  
    13.   @override
    14.   Widget build(BuildContext context) {
    15.     return Scaffold(
    16.       appBar: AppBar(
    17.         title: Text("GestureDetector"),
    18.       ),
    19.       body: Center(
    20.         child: Stack(
    21.           children: [
    22.             GestureDetector(
    23.               onVerticalDragCancel: () {
    24.                 print("onVerticalDragCancel");
    25.               },
    26.               onVerticalDragDown: (details) {
    27.                 print("onVerticalDragDown---${details.globalPosition}---${details.localPosition}");
    28.               },
    29.               onVerticalDragEnd: (details) {
    30.                 print("onVerticalDragEnd---${details.velocity}---${details.primaryVelocity}");
    31.               },
    32.               onVerticalDragStart: (details) {
    33.                 print("onVerticalDragStart---${details.globalPosition}---${details.localPosition}");
    34.               },
    35.               onVerticalDragUpdate: (details) {
    36.                 print("onVerticalDragUpdate---${details.globalPosition}---${details.localPosition}---${details.delta}");
    37.                 setState(() {
    38.                   _top += details.delta.dy;
    39.                 });
    40.  
    41.               },
    42.               child: Stack(
    43.                 children: [
    44.                   Positioned(
    45.                     left: _left,
    46.                     top: _top,
    47.                     child: Container(
    48.                       width: 200,
    49.                       height: 200,
    50.                       color: Colors.orange,
    51.                       alignment: Alignment.center,
    52.                       child: Text("Jimi",
    53.                         style: TextStyle(
    54.                             color: Colors.white,
    55.                             fontSize: 30
    56.                         ),
    57.                       ),
    58.                     ),
    59.                   )
    60.                 ],
    61.               ),
    62.             )
    63.           ],
    64.         ),
    65.       ),
    66.     );
    67.   }
    68. }

    GestureDetector垂直滑动手势控制台输出

    第一种：点击Container容器

    1. flutter: onVerticalDragDown---Offset(76.5, 114.5)---Offset(76.5, 38.5)
    2. flutter: onVerticalDragStart---Offset(76.5, 114.5)---Offset(76.5, 38.5)
    3. flutter: onVerticalDragEnd---Velocity(0.0, 0.0)---0.0

    第二种：拖动Container容器

    1. flutter: onVerticalDragDown---Offset(185.5, 332.5)---Offset(185.5, 256.5)
    2. flutter: onVerticalDragStart---Offset(185.5, 332.5)---Offset(185.5, 256.5)
    3. flutter: onVerticalDragUpdate---Offset(185.5, 332.0)---Offset(185.5, 256.0)
    4. flutter: onVerticalDragUpdate---Offset(187.5, 322.0)---Offset(187.5, 246.0)
    5. flutter: onVerticalDragUpdate---Offset(192.0, 307.0)---Offset(192.0, 231.0)
    6. flutter: onVerticalDragUpdate---Offset(193.5, 298.0)---Offset(193.5, 222.0)
    7. flutter: onVerticalDragUpdate---Offset(193.5, 297.0)---Offset(193.5, 221.0)
    8. flutter: onVerticalDragEnd---Velocity(131.3, -548.9)----548.8773895303548

    第三种：拖动Container容器并马上松开

    1. flutter: onVerticalDragDown---Offset(10.5, 93.5)---Offset(10.5, 17.5)
    2. flutter: onVerticalDragCancel

    5.GestureDetector水平滑动手势

    序列号字段属性描述
    1onHorizontalDragDownGestureDragDownCallback手指按下时的回调函数
    2onHorizontalDragStartGestureDragStartCallback手指开始水平滑动时的回调函数
    3onHorizontalDragUpdateGestureDragUpdateCallback手指水平滑动时的回调函数
    4onHorizontalDragEndGestureDragEndCallback手指水平滑动结束时的回调函数
    5onHorizontalDragCancelGestureDragCancelCallback手指水平滑动取消时的回调函数

    我们在Container容器上添加了水平滑动手势，代码如下：

    1. import 'package:flutter/material.dart';
    2.  
    3. class GestureDetectorExample extends StatefulWidget {
    4.   @override
    5.   _GestureDetectorExampleState createState() => _GestureDetectorExampleState();
    6. }
    7.  
    8. class _GestureDetectorExampleState extends State<GestureDetectorExample> {
    9.  
    10.   double _left = 0;
    11.   double _top = 0;
    12.  
    13.   @override
    14.   Widget build(BuildContext context) {
    15.     return Scaffold(
    16.       appBar: AppBar(
    17.         title: Text("GestureDetector"),
    18.       ),
    19.       body: Center(
    20.         child: Stack(
    21.           children: [
    22.             /// 水平滑动
    23.             GestureDetector(
    24.               onHorizontalDragCancel: () {
    25.                 print("onHorizontalDragCancel");
    26.               },
    27.               onHorizontalDragDown: (details) {
    28.                 print("onHorizontalDragDown---${details.globalPosition}---${details.localPosition}");
    29.               },
    30.               onHorizontalDragEnd: (details) {
    31.                 print("onHorizontalDragEnd---${details.velocity}---${details.primaryVelocity}");
    32.               },
    33.               onHorizontalDragStart: (details) {
    34.                 print("onHorizontalDragStart---${details.globalPosition}---${details.localPosition}");
    35.               },
    36.               onHorizontalDragUpdate: (details) {
    37.                 print("onHorizontalDragUpdate---${details.globalPosition}---${details.localPosition}---${details.delta}");
    38.                 setState(() {
    39.                   _left += details.delta.dx;
    40.                 });
    41.  
    42.               },
    43.               child: Stack(
    44.                 children: [
    45.                   Positioned(
    46.                     left: _left,
    47.                     top: _top,
    48.                     child: Container(
    49.                       width: 200,
    50.                       height: 200,
    51.                       color: Colors.orange,
    52.                       alignment: Alignment.center,
    53.                       child: Text("Jimi",
    54.                         style: TextStyle(
    55.                             color: Colors.white,
    56.                             fontSize: 30
    57.                         ),
    58.                       ),
    59.                     ),
    60.                   )
    61.                 ],
    62.               ),
    63.             )
    64.  
    65.           ],
    66.         ),
    67.       ),
    68.     );
    69.   }
    70. }

    GestureDetector水平滑动控制台输出

    第一种：点击Container容器

    1. flutter: onHorizontalDragDown---Offset(151.5, 118.0)---Offset(151.5, 42.0)
    2. flutter: onHorizontalDragStart---Offset(151.5, 118.0)---Offset(151.5, 42.0)
    3. flutter: onHorizontalDragEnd---Velocity(0.0, 0.0)---0.0

    第二种：拖动Container容器

    1. flutter: onHorizontalDragDown---Offset(97.5, 135.5)---Offset(97.5, 59.5)
    2. flutter: onHorizontalDragStart---Offset(97.5, 135.5)---Offset(97.5, 59.5)
    3. flutter: onHorizontalDragUpdate---Offset(100.0, 136.0)---Offset(100.0, 60.0)---Offset(2.5, 0.0)
    4. flutter: onHorizontalDragUpdate---Offset(100.5, 136.0)---Offset(100.5, 60.0)---Offset(0.5, 0.0)
    5. flutter: onHorizontalDragUpdate---Offset(102.0, 136.0)---Offset(102.0, 60.0)---Offset(1.5, 0.0)
    6. flutter: onHorizontalDragUpdate---Offset(105.0, 136.5)---Offset(105.0, 60.5)---Offset(3.0, 0.0)
    7. flutter: onHorizontalDragUpdate---Offset(107.0, 137.0)---Offset(107.0, 61.0)---Offset(2.0, 0.0)
    8. flutter: onHorizontalDragUpdate---Offset(108.5, 137.0)---Offset(108.5, 61.0)---Offset(1.5, 0.0)
    9. flutter: onHorizontalDragUpdate---Offset(109.0, 137.0)---Offset(109.0, 61.0)---Offset(0.5, 0.0)
    10. flutter: onHorizontalDragUpdate---Offset(110.0, 137.0)---Offset(110.0, 61.0)---Offset(1.0, 0.0)
    11. flutter: onHorizontalDragUpdate---Offset(111.0, 137.0)---Offset(111.0, 61.0)---Offset(1.0, 0.0)
    12. flutter: onHorizontalDragEnd---Velocity(0.0, 0.0)---0.0

    第三种：拖动Container容器并马上松开

    1. flutter: onHorizontalDragDown---Offset(6.0, 109.0)---Offset(6.0, 33.0)
    2. flutter: onHorizontalDragCancel

    6.GestureDetector拖动手势

    序列号字段属性描述
    1onPanDownGestureDragDownCallback手指按下时的回调函数
    2onPanStartGestureDragStartCallback手指开始拖动时的回调函数
    3onPanUpdateGestureDragUpdateCallback手指移动时的回调函数
    4onPanEndGestureDragEndCallback手指抬起时的回调函数
    5onPanCancelGestureDragCancelCallback手指取消拖动时的回调函数

    我们在Container容器上添加了拖动手势，代码如下:

    1. import 'package:flutter/material.dart';
    2.  
    3. class GestureDetectorExample extends StatefulWidget {
    4.   @override
    5.   _GestureDetectorExampleState createState() => _GestureDetectorExampleState();
    6. }
    7.  
    8. class _GestureDetectorExampleState extends State<GestureDetectorExample> {
    9.  
    10.   double _left = 0;
    11.   double _top = 0;
    12.  
    13.   @override
    14.   Widget build(BuildContext context) {
    15.     return Scaffold(
    16.       appBar: AppBar(
    17.         title: Text("GestureDetector"),
    18.       ),
    19.       body: Center(
    20.         child: Stack(
    21.           children: [
    22.  
    23.             // 拖动手势
    24.             GestureDetector(
    25.               onPanCancel: () {
    26.                 print("onPanCancel");
    27.               },
    28.               onPanDown: (details) {
    29.                 print("onPanDown---${details.globalPosition}---${details.localPosition}");
    30.               },
    31.               onPanEnd: (details) {
    32.                 print("onPanEnd---${details.velocity}---${details.primaryVelocity}");
    33.               },
    34.               onPanStart: (details) {
    35.                 print("onPanStart---${details.globalPosition}---${details.localPosition}");
    36.               },
    37.               onPanUpdate: (details) {
    38.                 print("onPanUpdate---${details.globalPosition}---${details.localPosition}---${details.delta}");
    39.                 setState(() {
    40.                   _left += details.delta.dx;
    41.                   _top += details.delta.dy;
    42.                 });
    43.               },
    44.               child: Stack(
    45.                 children: [
    46.                   Positioned(
    47.                     left: _left,
    48.                     top: _top,
    49.                     child: Container(
    50.                       width: 200,
    51.                       height: 200,
    52.                       color: Colors.orange,
    53.                       alignment: Alignment.center,
    54.                       child: Text("Jimi",
    55.                         style: TextStyle(
    56.                             color: Colors.white,
    57.                             fontSize: 30
    58.                         ),
    59.                       ),
    60.                     ),
    61.                   )
    62.                 ],
    63.               ),
    64.             )
    65.           ],
    66.         ),
    67.       ),
    68.     );
    69.   }
    70. }

    GestureDetector拖动手势控制台输出

    第一种：点击Container容器

    1. flutter: onPanDown---Offset(161.0, 233.0)---Offset(161.0, 157.0)
    2. flutter: onPanStart---Offset(161.0, 233.0)---Offset(161.0, 157.0)
    3. flutter: onPanEnd---Velocity(0.0, 0.0)---0.0

    第二种：拖动Container容器

    1. flutter: onPanDown---Offset(123.5, 193.5)---Offset(123.5, 117.5)
    2. flutter: onPanStart---Offset(123.5, 193.5)---Offset(123.5, 117.5)
    3. flutter: onPanUpdate---Offset(123.5, 193.0)---Offset(123.5, 117.0)---Offset(0.0, -0.5)
    4. flutter: onPanUpdate---Offset(124.0, 193.0)---Offset(124.0, 117.0)---Offset(0.5, 0.0)
    5. flutter: onPanUpdate---Offset(124.5, 192.0)---Offset(124.5, 116.0)---Offset(0.5, -1.0)
    6. flutter: onPanUpdate---Offset(125.5, 190.5)---Offset(125.5, 114.5)---Offset(1.0, -1.5)
    7. flutter: onPanUpdate---Offset(126.0, 190.0)---Offset(126.0, 114.0)---Offset(0.5, -0.5)
    8. flutter: onPanUpdate---Offset(126.5, 189.5)---Offset(126.5, 113.5)---Offset(0.5, -0.5)
    9. flutter: onPanUpdate---Offset(127.0, 189.0)---Offset(127.0, 113.0)---Offset(0.5, -0.5)
    10. flutter: onPanEnd---Velocity(0.0, 0.0)---0.0

    第三种：拖动Container容器并马上松开

    1. flutter: onPanDown---Offset(5.5, 162.5)---Offset(5.5, 86.5)
    2. flutter: onPanCancel

    7.GestureDetector缩放手势

    序列号字段属性描述
    1onScaleStartGestureScaleStartCallback开始缩放时的回调函数
    2onScaleUpdateGestureScaleUpdateCallback缩放移动时的回调函数
    3onScaleEndGestureScaleEndCallback缩放结束时的回调函数

    我们在Container容器上添加了缩放手势，代码如下：:

    1. import 'package:flutter/material.dart';
    2.  
    3. class GestureDetectorExample extends StatefulWidget {
    4.   @override
    5.   _GestureDetectorExampleState createState() => _GestureDetectorExampleState();
    6. }
    7.  
    8. class _GestureDetectorExampleState extends State<GestureDetectorExample> {
    9.  
    10.   double _left = 0;
    11.   double _top = 0;
    12.   double _widthAndHeight = 200;
    13.  
    14.   @override
    15.   Widget build(BuildContext context) {
    16.     return Scaffold(
    17.       appBar: AppBar(
    18.         title: Text("GestureDetector"),
    19.       ),
    20.       body: Center(
    21.         child: Stack(
    22.           children: [
    23.             /// 缩放手势
    24.             GestureDetector(
    25.               onScaleEnd: (details) {
    26.                 print("onScaleEnd---${details.velocity}---${details.pointerCount}");
    27.               },
    28.               onScaleStart: (details) {
    29.                 print("onScaleStart---${details.focalPoint}---${details.pointerCount}");
    30.               },
    31.               onScaleUpdate: (details) {
    32.                 print("onScaleUpdate---${details.scale}---${details.scale.clamp(0.1, 1.2)}");
    33.                 setState(() {
    34.                   _widthAndHeight = 200 * details.scale.clamp(0.3, 1.8);
    35.                 });
    36.               },
    37.               child: Container(
    38.                 width: _widthAndHeight,
    39.                 height: _widthAndHeight,
    40.                 color: Colors.orange,
    41.                 alignment: Alignment.center,
    42.                 child: Text("Jimi",
    43.                   style: TextStyle(
    44.                       color: Colors.white,
    45.                       fontSize: 30
    46.                   ),
    47.                 ),
    48.               ),
    49.             )
    50.  
    51.           ],
    52.         ),
    53.       ),
    54.     );
    55.   }
    56. }

    第一种：点击Container容器

    1. flutter: onScaleStart---Offset(149.5, 348.0)---1
    2. flutter: onScaleEnd---Velocity(0.0, 0.0)---0

    第二种：单指拖动Container容器

    1. flutter: onScaleStart---Offset(178.0, 304.5)---1
    2. flutter: onScaleUpdate---1.0---1.0
    3. flutter: onScaleUpdate---1.0---1.0
    4. flutter: onScaleUpdate---1.0---1.0
    5. flutter: onScaleUpdate---1.0---1.0
    6. flutter: onScaleEnd---Velocity(0.0, 0.0)---0

    第三种：双指缩放Container容器

    1. flutter: onScaleStart---Offset(187.5, 333.5)---2
    2. flutter: onScaleUpdate---1.0055027720002572---1.0055027720002572
    3. flutter: onScaleUpdate---1.0110087715145855---1.0110087715145855
    4. flutter: onScaleUpdate---1.0293231946761667---1.0293231946761667
    5. flutter: onScaleUpdate---1.04763763435052---1.04763763435052
    6. flutter: onScaleUpdate---1.0531463022961167---1.0531463022961167
    7. flutter: onScaleEnd---Velocity(0.0, 0.0)---1

    8.带有3D Touch功能压力设备触发手势

    序列号字段属性描述
    1onForcePressStartGestureForcePressStartCallback手指强制按下时的回调函数
    2onForcePressPeakGestureForcePressPeakCallback手指按压力度最大时的回调函数
    3onForcePressUpdateGestureForcePressUpdateCallback手指按下后移动时的回调函数
    4onForcePressEndGestureForcePressEndCallback手指离开时的回调函数

    9.辅助按钮触发手势

    序列号字段属性描述
    1onSecondaryTapGestureTapCallback辅助按钮单击时的回调函数
    2onSecondaryTapDownGestureTapDownCallback辅助按钮按下时的回调函数
    3onSecondaryTapUpGestureTapUpCallback辅助按钮松开时的回调函数
    4onSecondaryTapCancelGestureTapCancelCallback辅助按钮取消点击时的回调函数
    5onSecondaryLongPressDownGestureLongPressDownCallback辅助按钮按下去时的回调函数
    6onSecondaryLongPressCancelGestureLongPressCancelCallback辅助按钮长按取消时的回调函数
    7onSecondaryLongPressGestureLongPressCallback辅助按钮长按时的回调函数
    8onSecondaryLongPressStartGestureLongPressStartCallback辅助按钮长按并开始拖动时的回调函数
    9onSecondaryLongPressMoveUpdateGestureLongPressMoveUpdateCallback辅助按钮长按并移动时的回调函数
    10onSecondaryLongPressUpGestureLongPressUpCallback辅助按钮长按并松开时的回调函数
    11onSecondaryLongPressEndGestureLongPressEndCallback辅助按钮长按结束拖动时的回调函数

    10.三指触发手势

    序列号字段属性描述
    1onTertiaryTapDownGestureTapDownCallback三指按下时的回调函数
    2onTertiaryTapUpGestureTapUpCallback三指点击时的回调函数
    3onTertiaryTapCancelGestureTapCancelCallback三指取消时的回调函数
    4onTertiaryLongPressDownGestureLongPressDownCallback三指按下去时的回调函数
    5onTertiaryLongPressCancelGestureLongPressCancelCallback三指长按取消时的回调函数
    6onTertiaryLongPressGestureLongPressCallback三指长按时的回调函数
    7onTertiaryLongPressStartGestureLongPressStartCallback三指长按并开始拖动时的回调函数
    8onTertiaryLongPressMoveUpdateGestureLongPressMoveUpdateCallback三指长按并移动时的回调函数
    9onTertiaryLongPressUpGestureLongPressUpCallback三指长按并松开时的回调函数
    10onTertiaryLongPressEndGestureLongPressEndCallback三指长按结束拖动时的回调函数

    11.其他属性

    序列号字段属性描述
    1childWidget子组件
    2behaviorHitTestBehavior在命中测试期间如何表现
    3excludeFromSemanticsbool是否从语义树中排除这些手势，默认false
    4dragStartBehaviorDragStartBehavior拖拽行为的处理方式

  • 相关阅读:
    JetPack--Navigation实现页面跳转
    【XML文件数据预处理】获取xml文件中所有标签名称及数量||提取某个特定标签的数量||生成包含某个标签的图片索引txt并复制图片到指定文件夹
    拒绝灵感焦虑，藏在UI设计师书签里的宝藏网站！
    算法排序6——快速排序（分治思想）
    Springboot毕设项目线上影院系统ao90djava+VUE+Mybatis+Maven+Mysql+sprnig）
    iOS Hook 崩溃
    C语言求字符串的长度
    Javaweb-JSP详解
    《canvas》之第5章 文本操作
    【毕业设计】基于SSM与VUE的在线医疗诊断跟踪系统
  • 原文地址：https://blog.csdn.net/eastWind1101/article/details/127978385