Flutter入门: GestureDetector 详解

Auth:老猿𝕏𝕏       Date:2024/06/23       Cat:编程       Word:共11684字

暂无评论

当前版本 Flutter 3.19.5

GestureDetector API

属性

child

  GestureDetector(
    onTap: () {
      print("Tap");
    },
    child: Container(
      color: Colors.green,
      width: 50,
      height: 50,
    ),
  )

behavior

指定如何处理命中测试（hit testing），确定小部件的响应区域。

如果child不为 null， 则默认为 HitTestBehavior.deferToChild，如果 child 为 null，则默认为 HitTestBehavior.translucent 

  GestureDetector(
    onTap: () {
      print("Tap");
    },
    child: Container(
      color: Colors.green,
      width: 50,
      height: 50,
    ),
    behavior: HitTestBehavior.deferToChild,
  )

onTap

用户轻触屏幕时触发的回调

  GestureDetector(
    onTap: () {
      print("onTap");
    },
    child: Container(
      color: Colors.green,
      width: 50,
      height: 50,
    ),
  )

onTapDown

用户手指按下时触发的回调

  GestureDetector(
    onTapDown: (TapDownDetails details) {
      print('${details.localPosition.dx}, ${details.localPosition.dy}');
    },
    child: Container(
      color: Colors.green,
      width: 50,
      height: 50,
    ),
  )

onTapUp

用户手指抬起时触发的回调

  GestureDetector(
    onTapUp: (TapUpDetails details) {
      print('${details.localPosition.dx}, ${details.localPosition.dy}');
    },
    child: Container(
      color: Colors.green,
      width: 50,
      height: 50,
    ),
  )

onTapCancel

用户轻触操作被取消时触发的回调

  GestureDetector(
    onTapCancel: () {
      print('onTapCancel');
    },
    child: Container(
      color: Colors.green,
      width: 50,
      height: 50,
    ),
  )

onSecondaryTap

两指按下时的回调函数

  GestureDetector(
    onSecondaryTap: () {
      print('onSecondaryTap');
    },
    child: Container(
      color: Colors.green,
      width: 50,
      height: 50,
    ),
  )

onSecondaryTapDown

两指按下时的回调函数

  GestureDetector(
    onSecondaryTapDown: (TapDownDetails details) {
      print('${details.localPosition.dx}, ${details.localPosition.dy}');
    },
    child: Container(
      color: Colors.green,
      width: 50,
      height: 50,
    ),
  )

onSecondaryTapUp

两指松开时的回调函数

  GestureDetector(
    onSecondaryTapUp: (TapUpDetails details) {
      print('${details.localPosition.dx}, ${details.localPosition.dy}');
    },
    child: Container(
      color: Colors.green,
      width: 50,
      height: 50,
    ),
  )

onSecondaryTapCancel

两指取消时的回调函数

  GestureDetector(
    onSecondaryTapCancel: () {
      print('onSecondaryTapCancel');
    },
    child: Container(
      color: Colors.green,
      width: 50,
      height: 50,
    ),
  )

onTertiaryTapDown

三指按下时的回调函数

  GestureDetector(
    onTertiaryTapDown: (TapDownDetails details) {
      print('${details.localPosition.dx}, ${details.localPosition.dy}');
    },
    child: Container(
      color: Colors.green,
      width: 50,
      height: 50,
    ),
  )

onTertiaryTapUp

三指松开时的回调函数

  GestureDetector(
    onTertiaryTapUp: (TapUpDetails details) {
      print('${details.localPosition.dx}, ${details.localPosition.dy}');
    },
    child: Container(
      color: Colors.green,
      width: 50,
      height: 50,
    ),
  )

onTertiaryTapCancel

三指取消时的回调函数

  GestureDetector(
    onTertiaryTapCancel: () {
      print('onTertiaryTapCancel');
    },
    child: Container(
      color: Colors.green,
      width: 50,
      height: 50,
    ),
  )

onDoubleTap

用户双击屏幕时触发的回调

  GestureDetector(
    onDoubleTap: () {
      print('onDoubleTap');
    },
    child: Container(
      color: Colors.green,
      width: 50,
      height: 50,
    ),
  )

onDoubleTapDown

用户双击屏幕按下时的回调函数

  GestureDetector(
    onDoubleTapDown: (TapDownDetails details) {
      print('${details.localPosition.dx}, ${details.localPosition.dy}');
    },
    child: Container(
      color: Colors.green,
      width: 50,
      height: 50,
    ),
  )

onDoubleTapCancel

用户双击屏幕取消时的回调函数

  GestureDetector(
    onDoubleTapCancel: () {
      print('onDoubleTapCancel');
    },
    child: Container(
      color: Colors.green,
      width: 50,
      height: 50,
    ),
  )

onLongPress

用户长按屏幕时触发的回调

  GestureDetector(
    onLongPress: () {
      print('onLongPress');
    },
    child: Container(
      color: Colors.green,
      width: 50,
      height: 50,
    ),
  )

onLongPressStart

用户长按屏幕开始时触发的回调

  GestureDetector(
    onLongPressStart: (LongPressStartDetails details) {
      print('${details.localPosition.dx}, ${details.localPosition.dy}');
    },
    child: Container(
      color: Colors.green,
      width: 50,
      height: 50,
    ),
  )

onLongPressMoveUpdate

用户长按屏幕移动时触发的回调

  GestureDetector(
    onLongPressMoveUpdate: (LongPressMoveUpdateDetails details) {
      print('${details.localPosition.dx}, ${details.localPosition.dy}');
    },
    child: Container(
      color: Colors.green,
      width: 50,
      height: 50,
    ),
  )

onLongPressUp

用户长按屏幕结束时触发的回调

  GestureDetector(
    onLongPressUp: () {
      print('onLongPressUp');
    },
    child: Container(
      color: Colors.green,
      width: 50,
      height: 50,
    ),
  )

onLongPressEnd

用户长按屏幕结束时触发的回调

  GestureDetector(
    onLongPressEnd: (LongPressEndDetails details) {
      print('${details.localPosition.dx}, ${details.localPosition.dy}');
    },
    child: Container(
      color: Colors.green,
      width: 50,
      height: 50,
    ),
  )

onLongPressDown

用户长按屏幕按下时触发的回调

  GestureDetector(
    onLongPressDown: (LongPressDownDetails details) {
      print('${details.localPosition.dx}, ${details.localPosition.dy}');
    },
    child: Container(
      color: Colors.green,
      width: 50,
      height: 50,
    ),
  )

onLongPressCancel

用户长按屏幕取消时触发的回调

  GestureDetector(
    onLongPressCancel: () {
      print('onLongPressCancel');
    },
    child: Container(
      color: Colors.green,
      width: 50,
      height: 50,
    ),
  )

onSecondaryLongPress

用户两指长按屏幕时触发的回调

  GestureDetector(
    onSecondaryLongPress: () {
      print('onSecondaryLongPress');
    },
    child: Container(
      color: Colors.green,
      width: 50,
      height: 50,
    ),
  )

onSecondaryLongPressStart

用户两指长按屏幕开始时触发的回调

  GestureDetector(
    onSecondaryLongPressStart: (LongPressStartDetails details) {
      print('${details.localPosition.dx}, ${details.localPosition.dy}');
    },
    child: Container(
      color: Colors.green,
      width: 50,
      height: 50,
    ),
  )

onSecondaryLongPressMoveUpdate

用户两指长按屏幕移动时触发的回调

  GestureDetector(
    onSecondaryLongPressMoveUpdate: (LongPressMoveUpdateDetails details) {
      print('${details.localPosition.dx}, ${details.localPosition.dy}');
    },
    child: Container(
      color: Colors.green,
      width: 50,
      height: 50,
    ),
  )

onSecondaryLongPressUp

用户两指长按屏幕结束时触发的回调

  GestureDetector(
    onSecondaryLongPressUp: () {
      print('onSecondaryLongPressUp');
    },
    child: Container(
      color: Colors.green,
      width: 50,
      height: 50,
    ),
  )

onSecondaryLongPressEnd

用户两指长按屏幕结束时触发的回调

  GestureDetector(
    onSecondaryLongPressEnd: (LongPressEndDetails details) {
      print('${details.localPosition.dx}, ${details.localPosition.dy}');
    },
    child: Container(
      color: Colors.green,
      width: 50,
      height: 50,
    ),
  )

onSecondaryLongPressCancel

用户两指长按屏幕取消时触发的回调

  GestureDetector(
    onSecondaryLongPressCancel: () {
      print('onSecondaryLongPressCancel');
    },
    child: Container(
      color: Colors.green,
      width: 50,
      height: 50,
    ),
  )

onSecondaryLongPressDown

用户两指长按屏幕按下时触发的回调

  GestureDetector(
    onSecondaryLongPressDown: (LongPressDownDetails details) {
      print('${details.localPosition.dx}, ${details.localPosition.dy}');
    },
    child: Container(
      color: Colors.green,
      width: 50,
      height: 50,
    ),
  )

onTertiaryLongPress

用户三指长按屏幕时触发的回调

  GestureDetector(
    onTertiaryLongPress: () {
      print('onTertiaryLongPress');
    },
    child: Container(
      color: Colors.green,
      width: 50,
      height: 50,
    ),
  )

onTertiaryLongPressStart

用户三指长按屏幕开始时触发的回调

  GestureDetector(
    onTertiaryLongPressStart: (LongPressStartDetails details) {
      print('${details.localPosition.dx}, ${details.localPosition.dy}');
    },
    child: Container(
      color: Colors.green,
      width: 50,
      height: 50,
    ),
  )

onTertiaryLongPressMoveUpdate

用户三指长按屏幕移动时触发的回调

  GestureDetector(
    onTertiaryLongPressMoveUpdate: (LongPressMoveUpdateDetails details) {
      print('${details.localPosition.dx}, ${details.localPosition.dy}');
    },
    child: Container(
      color: Colors.green,
      width: 50,
      height: 50,
    ),
  )

onTertiaryLongPressUp

用户三指长按屏幕结束时触发的回调

  GestureDetector(
    onTertiaryLongPressUp: () {
      print('onTertiaryLongPressUp');
    },
    child: Container(
      color: Colors.green,
      width: 50,
      height: 50,
    ),
  )

onTertiaryLongPressEnd

用户三指长按屏幕结束时触发的回调

  GestureDetector(
    onTertiaryLongPressEnd: (LongPressEndDetails details) {
      print('${details.localPosition.dx}, ${details.localPosition.dy}');
    },
    child: Container(
      color: Colors.green,
      width: 50,
      height: 50,
    ),
  )

onTertiaryLongPressCancel

用户三指长按屏幕取消时触发的回调

  GestureDetector(
    onTertiaryLongPressCancel: () {
      print('onTertiaryLongPressCancel');
    },
    child: Container(
      color: Colors.green,
      width: 50,
      height: 50,
    ),
  )

onTertiaryLongPressDown

用户三指长按屏幕按下时触发的回调

  GestureDetector(
    onTertiaryLongPressDown: (LongPressDownDetails details) {
      print('${details.localPosition.dx}, ${details.localPosition.dy}');
    },
    child: Container(
      color: Colors.green,
      width: 50,
      height: 50,
    ),
  )

onVerticalDragDown

用户垂直方向拖动屏幕时触发的回调

  GestureDetector(
    onVerticalDragDown: (DragDownDetails details) {
      print('${details.localPosition.dx}, ${details.localPosition.dy}');
    },
    child: Container(
      color: Colors.green,
      width: 50,
      height: 50,
    ),
  )

onVerticalDragStart

用户垂直方向拖动屏幕开始时触发的回调

  GestureDetector(
    onVerticalDragStart: (DragStartDetails details) {
      print('${details.localPosition.dx}, ${details.localPosition.dy}');
    },
    child: Container(
      color: Colors.green,
      width: 50,
      height: 50,
    ),
  )

onVerticalDragUpdate

用户垂直方向拖动屏幕时触发的回调

  GestureDetector(
    onVerticalDragUpdate: (DragUpdateDetails details) {
      print('${details.localPosition.dx}, ${details.localPosition.dy}');
    },
    child: Container(
      color: Colors.green,
      width: 50,
      height: 50,
    ),
  )

onVerticalDragEnd

用户垂直方向拖动屏幕结束时触发的回调

  GestureDetector(
    onVerticalDragEnd: (DragEndDetails details) {
      print('${details.localPosition.dx}, ${details.localPosition.dy}');
    },
    child: Container(
      color: Colors.green,
      width: 50,
      height: 50,
    ),
  )

onVerticalDragCancel

用户垂直方向拖动屏幕取消时触发的回调

  GestureDetector(
    onVerticalDragCancel: () {
      print('onVerticalDragCancel');
    },
    child: Container(
      color: Colors.green,
      width: 50,
      height: 50,
    ),
  )

onHorizontalDragDown

用户水平方向拖动屏幕时触发的回调

  GestureDetector(
    onHorizontalDragDown: (DragDownDetails details) {
      print('${details.localPosition.dx}, ${details.localPosition.dy}');
    },
    child: Container(
      color: Colors.green,
      width: 50,
      height: 50,
    ),
  )

onHorizontalDragStart

用户水平方向拖动屏幕开始时触发的回调

  GestureDetector(
    onHorizontalDragStart: (DragStartDetails details) {
      print('${details.localPosition.dx}, ${details.localPosition.dy}');
    },
    child: Container(
      color: Colors.green,
      width: 50,
      height: 50,
    ),
  )

onHorizontalDragUpdate

用户水平方向拖动屏幕时触发的回调

  GestureDetector(
    onHorizontalDragUpdate: (DragUpdateDetails details) {
      print('${details.localPosition.dx}, ${details.localPosition.dy}');
    },
    child: Container(
      color: Colors.green,
      width: 50,
      height: 50,
    ),
  )

onHorizontalDragEnd

用户水平方向拖动屏幕结束时触发的回调

  GestureDetector(
    onHorizontalDragEnd: (DragEndDetails details) {
      print('${details.localPosition.dx}, ${details.localPosition.dy}');
    },
    child: Container(
      color: Colors.green,
      width: 50,
      height: 50,
    ),
  )

onHorizontalDragCancel

用户水平方向拖动屏幕取消时触发的回调

  GestureDetector(
    onHorizontalDragCancel: () {
      print('onHorizontalDragCancel');
    },
    child: Container(
      color: Colors.green,
      width: 50,
      height: 50,
    ),
  )

onForcePressStart

用户开始用力按压时触发的回调

  GestureDetector(
    onForcePressStart: (ForcePressDetails details) {
      print('${details.pressure}');
    },
    child: Container(
      color: Colors.green,
      width: 50,
      height: 50,
    ),
  )

onForcePressEnd

用户结束用力按压时触发的回调

  GestureDetector(
    onForcePressEnd: (ForcePressEndDetails details) {
      print('${details.pressure}');
    },
    child: Container(
      color: Colors.green,
      width: 50,
      height: 50,
    ),
  )

onForcePressPeak

用户用力按压达到峰值时触发的回调

  GestureDetector(
    onForcePressPeak: (ForcePressPeakDetails details) {
      print('${details.pressure}');
    },
    child: Container(
      color: Colors.green,
      width: 50,
      height: 50,
    ),
  )

onForcePressUpdate

用户用力按压更新时触发的回调

  GestureDetector(
    onForcePressUpdate: (ForcePressUpdateDetails details) {
      print('${details.pressure}');
    },
    child: Container(
      color: Colors.green,
      width: 50,
      height: 50,
    ),
  )

onPanDown

用户拖动屏幕时触发的回调

  GestureDetector(
    onPanDown: (DragDownDetails details) {
      print('${details.localPosition.dx}, ${details.localPosition.dy}');
    },
    child: Container(
      color: Colors.green,
      width: 50,
      height: 50,
    ),
  )

onPanStart

用户拖动屏幕开始时触发的回调

  GestureDetector(
    onPanStart: (DragStartDetails details) {
      print('${details.localPosition.dx}, ${details.localPosition.dy}');
    },
    child: Container(
      color: Colors.green,
      width: 50,
      height: 50,
    ),
  )

onPanUpdate

用户拖动屏幕时触发的回调

  GestureDetector(
    onPanUpdate: (DragUpdateDetails details) {
      print('${details.localPosition.dx}, ${details.localPosition.dy}');
    },
    child: Container(
      color: Colors.green,
      width: 50,
      height: 50,
    ),
  )

onPanEnd

用户拖动屏幕结束时触发的回调

  GestureDetector(
    onPanEnd: (DragEndDetails details) {
      print('${details.velocity}');
    },
    child: Container(
      color: Colors.green,
      width: 50,
      height: 50,
    ),
  )

onPanCancel

用户拖动屏幕取消时触发的回调

  GestureDetector(
    onPanCancel: () {
      print('onPanCancel');
    },
    child: Container(
      color: Colors.green,
      width: 50,
      height: 50,
    ),
  )

onScaleStart

用户缩放屏幕开始时触发的回调

  GestureDetector(
    onScaleStart: (ScaleStartDetails details) {
      print('${details.focalPoint.dx}, ${details.focalPoint.dy}');
    },
    child: Container(
      color: Colors.green,
      width: 50,
      height: 50,
    ),
  )

onScaleUpdate

用户缩放屏幕时触发的回调

  GestureDetector(
    onScaleUpdate: (ScaleUpdateDetails details) {
      print('${details.focalPoint.dx}, ${details.focalPoint.dy}');
    },
    child: Container(
      color: Colors.green,
      width: 50,
      height: 50,
    ),
  )

onScaleEnd

用户缩放屏幕结束时触发的回调

  GestureDetector(
    onScaleEnd: (ScaleEndDetails details) {
      print('${details.velocity}');
    },
    child: Container(
      color: Colors.green,
      width: 50,
      height: 50,
    ),
  )

dragStartBehavior

控制拖动手势的开始行为，值可以是 start 或 down。

  GestureDetector(
    dragStartBehavior: DragStartBehavior.down,
    child: Container(
      color: Colors.green,
      width: 50,
      height: 50,
    ),
  )

trackpadScrollCausesScale

是否由跟踪板滚动引起缩放，默认为false

  GestureDetector(
    trackpadScrollCausesScale: true,
    child: Container(
      color: Colors.green,
      width: 50,
      height: 50,
    ),
  )
本文首发于：Flutter入门: GestureDetector 详解-老猿𝕏𝕏的笔记 ▪︎ 🐈

《Flutter入门: GestureDetector 详解》留言数：0

发表留言