article_template.html

<b id="green">当前版本 Flutter 3.19.5 </b>

<a class="button button_orange" href="https://api.flutter.dev/flutter/widgets/GestureDetector-class.html" target="_blank" rel="nofollow noopener"><i class="icon-link-ext">GestureDetector API</i></a>

<h2>属性</h2>

<h3>child</h3>
<blockquote><pre>
  GestureDetector(
    onTap: () {
      print("Tap");
    },
    child: Container(
      color: Colors.green,
      width: 50,
      height: 50,
    ),
  )
</pre></blockquote>

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

如果child不为 null， 则默认为 HitTestBehavior.deferToChild，如果 child 为 null，则默认为 HitTestBehavior.translucent 
<blockquote><pre>
  GestureDetector(
    onTap: () {
      print("Tap");
    },
    child: Container(
      color: Colors.green,
      width: 50,
      height: 50,
    ),
    behavior: HitTestBehavior.deferToChild,
  )
</pre></blockquote>

<h3>onTap</h3>
用户轻触屏幕时触发的回调
<blockquote><pre>
  GestureDetector(
    onTap: () {
      print("onTap");
    },
    child: Container(
      color: Colors.green,
      width: 50,
      height: 50,
    ),
  )
</pre></blockquote>

<h3>onTapDown</h3>
用户手指按下时触发的回调
<blockquote><pre>
  GestureDetector(
    onTapDown: (TapDownDetails details) {
      print('${details.localPosition.dx}, ${details.localPosition.dy}');
    },
    child: Container(
      color: Colors.green,
      width: 50,
      height: 50,
    ),
  )
</pre></blockquote>

<h3>onTapUp</h3>
用户手指抬起时触发的回调
<blockquote><pre>
  GestureDetector(
    onTapUp: (TapUpDetails details) {
      print('${details.localPosition.dx}, ${details.localPosition.dy}');
    },
    child: Container(
      color: Colors.green,
      width: 50,
      height: 50,
    ),
  )
</pre></blockquote>

<h3>onTapCancel</h3>
用户轻触操作被取消时触发的回调
<blockquote><pre>
  GestureDetector(
    onTapCancel: () {
      print('onTapCancel');
    },
    child: Container(
      color: Colors.green,
      width: 50,
      height: 50,
    ),
  )
</pre></blockquote>

<h3>onSecondaryTap</h3>
两指按下时的回调函数
<blockquote><pre>
  GestureDetector(
    onSecondaryTap: () {
      print('onSecondaryTap');
    },
    child: Container(
      color: Colors.green,
      width: 50,
      height: 50,
    ),
  )
</pre></blockquote>

<h3>onSecondaryTapDown</h3>
两指按下时的回调函数
<blockquote><pre>
  GestureDetector(
    onSecondaryTapDown: (TapDownDetails details) {
      print('${details.localPosition.dx}, ${details.localPosition.dy}');
    },
    child: Container(
      color: Colors.green,
      width: 50,
      height: 50,
    ),
  )
</pre></blockquote>

<h3>onSecondaryTapUp</h3>
两指松开时的回调函数
<blockquote><pre>
  GestureDetector(
    onSecondaryTapUp: (TapUpDetails details) {
      print('${details.localPosition.dx}, ${details.localPosition.dy}');
    },
    child: Container(
      color: Colors.green,
      width: 50,
      height: 50,
    ),
  )
</pre></blockquote>

<h3>onSecondaryTapCancel</h3>
两指取消时的回调函数
<blockquote><pre>
  GestureDetector(
    onSecondaryTapCancel: () {
      print('onSecondaryTapCancel');
    },
    child: Container(
      color: Colors.green,
      width: 50,
      height: 50,
    ),
  )
</pre></blockquote>

<h3>onTertiaryTapDown</h3>
三指按下时的回调函数
<blockquote><pre>
  GestureDetector(
    onTertiaryTapDown: (TapDownDetails details) {
      print('${details.localPosition.dx}, ${details.localPosition.dy}');
    },
    child: Container(
      color: Colors.green,
      width: 50,
      height: 50,
    ),
  )
</pre></blockquote>

<h3>onTertiaryTapUp</h3>
三指松开时的回调函数
<blockquote><pre>
  GestureDetector(
    onTertiaryTapUp: (TapUpDetails details) {
      print('${details.localPosition.dx}, ${details.localPosition.dy}');
    },
    child: Container(
      color: Colors.green,
      width: 50,
      height: 50,
    ),
  )
</pre></blockquote>

<h3>onTertiaryTapCancel</h3>
三指取消时的回调函数
<blockquote><pre>
  GestureDetector(
    onTertiaryTapCancel: () {
      print('onTertiaryTapCancel');
    },
    child: Container(
      color: Colors.green,
      width: 50,
      height: 50,
    ),
  )
</pre></blockquote>

<h3>onDoubleTap</h3>
用户双击屏幕时触发的回调
<blockquote><pre>
  GestureDetector(
    onDoubleTap: () {
      print('onDoubleTap');
    },
    child: Container(
      color: Colors.green,
      width: 50,
      height: 50,
    ),
  )
</pre></blockquote>

<h3>onDoubleTapDown</h3>
用户双击屏幕按下时的回调函数
<blockquote><pre>
  GestureDetector(
    onDoubleTapDown: (TapDownDetails details) {
      print('${details.localPosition.dx}, ${details.localPosition.dy}');
    },
    child: Container(
      color: Colors.green,
      width: 50,
      height: 50,
    ),
  )
</pre></blockquote>

<h3>onDoubleTapCancel</h3>
用户双击屏幕取消时的回调函数
<blockquote><pre>
  GestureDetector(
    onDoubleTapCancel: () {
      print('onDoubleTapCancel');
    },
    child: Container(
      color: Colors.green,
      width: 50,
      height: 50,
    ),
  )
</pre></blockquote>

<h3>onLongPress</h3>
用户长按屏幕时触发的回调
<blockquote><pre>
  GestureDetector(
    onLongPress: () {
      print('onLongPress');
    },
    child: Container(
      color: Colors.green,
      width: 50,
      height: 50,
    ),
  )
</pre></blockquote>

<h3>onLongPressStart</h3>
用户长按屏幕开始时触发的回调
<blockquote><pre>
  GestureDetector(
    onLongPressStart: (LongPressStartDetails details) {
      print('${details.localPosition.dx}, ${details.localPosition.dy}');
    },
    child: Container(
      color: Colors.green,
      width: 50,
      height: 50,
    ),
  )
</pre></blockquote>

<h3>onLongPressMoveUpdate</h3>
用户长按屏幕移动时触发的回调
<blockquote><pre>
  GestureDetector(
    onLongPressMoveUpdate: (LongPressMoveUpdateDetails details) {
      print('${details.localPosition.dx}, ${details.localPosition.dy}');
    },
    child: Container(
      color: Colors.green,
      width: 50,
      height: 50,
    ),
  )
</pre></blockquote>

<h3>onLongPressUp</h3>
用户长按屏幕结束时触发的回调
<blockquote><pre>
  GestureDetector(
    onLongPressUp: () {
      print('onLongPressUp');
    },
    child: Container(
      color: Colors.green,
      width: 50,
      height: 50,
    ),
  )
</pre></blockquote>

<h3>onLongPressEnd</h3>
用户长按屏幕结束时触发的回调
<blockquote><pre>
  GestureDetector(
    onLongPressEnd: (LongPressEndDetails details) {
      print('${details.localPosition.dx}, ${details.localPosition.dy}');
    },
    child: Container(
      color: Colors.green,
      width: 50,
      height: 50,
    ),
  )
</pre></blockquote>

<h3>onLongPressDown</h3>
用户长按屏幕按下时触发的回调
<blockquote><pre>
  GestureDetector(
    onLongPressDown: (LongPressDownDetails details) {
      print('${details.localPosition.dx}, ${details.localPosition.dy}');
    },
    child: Container(
      color: Colors.green,
      width: 50,
      height: 50,
    ),
  )
</pre></blockquote>

<h3>onLongPressCancel</h3>
用户长按屏幕取消时触发的回调
<blockquote><pre>
  GestureDetector(
    onLongPressCancel: () {
      print('onLongPressCancel');
    },
    child: Container(
      color: Colors.green,
      width: 50,
      height: 50,
    ),
  )
</pre></blockquote>





<h3>onSecondaryLongPress</h3>
用户两指长按屏幕时触发的回调
<blockquote><pre>
  GestureDetector(
    onSecondaryLongPress: () {
      print('onSecondaryLongPress');
    },
    child: Container(
      color: Colors.green,
      width: 50,
      height: 50,
    ),
  )
</pre></blockquote>

<h3>onSecondaryLongPressStart</h3>
用户两指长按屏幕开始时触发的回调
<blockquote><pre>
  GestureDetector(
    onSecondaryLongPressStart: (LongPressStartDetails details) {
      print('${details.localPosition.dx}, ${details.localPosition.dy}');
    },
    child: Container(
      color: Colors.green,
      width: 50,
      height: 50,
    ),
  )
</pre></blockquote>

<h3>onSecondaryLongPressMoveUpdate</h3>
用户两指长按屏幕移动时触发的回调
<blockquote><pre>
  GestureDetector(
    onSecondaryLongPressMoveUpdate: (LongPressMoveUpdateDetails details) {
      print('${details.localPosition.dx}, ${details.localPosition.dy}');
    },
    child: Container(
      color: Colors.green,
      width: 50,
      height: 50,
    ),
  )
</pre></blockquote>

<h3>onSecondaryLongPressUp</h3>
用户两指长按屏幕结束时触发的回调
<blockquote><pre>
  GestureDetector(
    onSecondaryLongPressUp: () {
      print('onSecondaryLongPressUp');
    },
    child: Container(
      color: Colors.green,
      width: 50,
      height: 50,
    ),
  )
</pre></blockquote>

<h3>onSecondaryLongPressEnd</h3>
用户两指长按屏幕结束时触发的回调
<blockquote><pre>
  GestureDetector(
    onSecondaryLongPressEnd: (LongPressEndDetails details) {
      print('${details.localPosition.dx}, ${details.localPosition.dy}');
    },
    child: Container(
      color: Colors.green,
      width: 50,
      height: 50,
    ),
  )
</pre></blockquote>

<h3>onSecondaryLongPressCancel</h3>
用户两指长按屏幕取消时触发的回调
<blockquote><pre>
  GestureDetector(
    onSecondaryLongPressCancel: () {
      print('onSecondaryLongPressCancel');
    },
    child: Container(
      color: Colors.green,
      width: 50,
      height: 50,
    ),
  )
</pre></blockquote>

<h3>onSecondaryLongPressDown</h3>
用户两指长按屏幕按下时触发的回调
<blockquote><pre>
  GestureDetector(
    onSecondaryLongPressDown: (LongPressDownDetails details) {
      print('${details.localPosition.dx}, ${details.localPosition.dy}');
    },
    child: Container(
      color: Colors.green,
      width: 50,
      height: 50,
    ),
  )
</pre></blockquote>





<h3>onTertiaryLongPress</h3>
用户三指长按屏幕时触发的回调
<blockquote><pre>
  GestureDetector(
    onTertiaryLongPress: () {
      print('onTertiaryLongPress');
    },
    child: Container(
      color: Colors.green,
      width: 50,
      height: 50,
    ),
  )
</pre></blockquote>

<h3>onTertiaryLongPressStart</h3>
用户三指长按屏幕开始时触发的回调
<blockquote><pre>
  GestureDetector(
    onTertiaryLongPressStart: (LongPressStartDetails details) {
      print('${details.localPosition.dx}, ${details.localPosition.dy}');
    },
    child: Container(
      color: Colors.green,
      width: 50,
      height: 50,
    ),
  )
</pre></blockquote>

<h3>onTertiaryLongPressMoveUpdate</h3>
用户三指长按屏幕移动时触发的回调
<blockquote><pre>
  GestureDetector(
    onTertiaryLongPressMoveUpdate: (LongPressMoveUpdateDetails details) {
      print('${details.localPosition.dx}, ${details.localPosition.dy}');
    },
    child: Container(
      color: Colors.green,
      width: 50,
      height: 50,
    ),
  )
</pre></blockquote>

<h3>onTertiaryLongPressUp</h3>
用户三指长按屏幕结束时触发的回调
<blockquote><pre>
  GestureDetector(
    onTertiaryLongPressUp: () {
      print('onTertiaryLongPressUp');
    },
    child: Container(
      color: Colors.green,
      width: 50,
      height: 50,
    ),
  )
</pre></blockquote>

<h3>onTertiaryLongPressEnd</h3>
用户三指长按屏幕结束时触发的回调
<blockquote><pre>
  GestureDetector(
    onTertiaryLongPressEnd: (LongPressEndDetails details) {
      print('${details.localPosition.dx}, ${details.localPosition.dy}');
    },
    child: Container(
      color: Colors.green,
      width: 50,
      height: 50,
    ),
  )
</pre></blockquote>

<h3>onTertiaryLongPressCancel</h3>
用户三指长按屏幕取消时触发的回调
<blockquote><pre>
  GestureDetector(
    onTertiaryLongPressCancel: () {
      print('onTertiaryLongPressCancel');
    },
    child: Container(
      color: Colors.green,
      width: 50,
      height: 50,
    ),
  )
</pre></blockquote>

<h3>onTertiaryLongPressDown</h3>
用户三指长按屏幕按下时触发的回调
<blockquote><pre>
  GestureDetector(
    onTertiaryLongPressDown: (LongPressDownDetails details) {
      print('${details.localPosition.dx}, ${details.localPosition.dy}');
    },
    child: Container(
      color: Colors.green,
      width: 50,
      height: 50,
    ),
  )
</pre></blockquote>


<h3>onVerticalDragDown</h3>
用户垂直方向拖动屏幕时触发的回调
<blockquote><pre>
  GestureDetector(
    onVerticalDragDown: (DragDownDetails details) {
      print('${details.localPosition.dx}, ${details.localPosition.dy}');
    },
    child: Container(
      color: Colors.green,
      width: 50,
      height: 50,
    ),
  )
</pre></blockquote>

<h3>onVerticalDragStart</h3>
用户垂直方向拖动屏幕开始时触发的回调
<blockquote><pre>
  GestureDetector(
    onVerticalDragStart: (DragStartDetails details) {
      print('${details.localPosition.dx}, ${details.localPosition.dy}');
    },
    child: Container(
      color: Colors.green,
      width: 50,
      height: 50,
    ),
  )
</pre></blockquote>

<h3>onVerticalDragUpdate</h3>
用户垂直方向拖动屏幕时触发的回调
<blockquote><pre>
  GestureDetector(
    onVerticalDragUpdate: (DragUpdateDetails details) {
      print('${details.localPosition.dx}, ${details.localPosition.dy}');
    },
    child: Container(
      color: Colors.green,
      width: 50,
      height: 50,
    ),
  )
</pre></blockquote>

<h3>onVerticalDragEnd</h3>
用户垂直方向拖动屏幕结束时触发的回调
<blockquote><pre>
  GestureDetector(
    onVerticalDragEnd: (DragEndDetails details) {
      print('${details.localPosition.dx}, ${details.localPosition.dy}');
    },
    child: Container(
      color: Colors.green,
      width: 50,
      height: 50,
    ),
  )
</pre></blockquote>

<h3>onVerticalDragCancel</h3>
用户垂直方向拖动屏幕取消时触发的回调
<blockquote><pre>
  GestureDetector(
    onVerticalDragCancel: () {
      print('onVerticalDragCancel');
    },
    child: Container(
      color: Colors.green,
      width: 50,
      height: 50,
    ),
  )
</pre></blockquote>


<h3>onHorizontalDragDown</h3>
用户水平方向拖动屏幕时触发的回调
<blockquote><pre>
  GestureDetector(
    onHorizontalDragDown: (DragDownDetails details) {
      print('${details.localPosition.dx}, ${details.localPosition.dy}');
    },
    child: Container(
      color: Colors.green,
      width: 50,
      height: 50,
    ),
  )
</pre></blockquote>

<h3>onHorizontalDragStart</h3>
用户水平方向拖动屏幕开始时触发的回调
<blockquote><pre>
  GestureDetector(
    onHorizontalDragStart: (DragStartDetails details) {
      print('${details.localPosition.dx}, ${details.localPosition.dy}');
    },
    child: Container(
      color: Colors.green,
      width: 50,
      height: 50,
    ),
  )
</pre></blockquote>

<h3>onHorizontalDragUpdate</h3>
用户水平方向拖动屏幕时触发的回调
<blockquote><pre>
  GestureDetector(
    onHorizontalDragUpdate: (DragUpdateDetails details) {
      print('${details.localPosition.dx}, ${details.localPosition.dy}');
    },
    child: Container(
      color: Colors.green,
      width: 50,
      height: 50,
    ),
  )
</pre></blockquote>

<h3>onHorizontalDragEnd</h3>
用户水平方向拖动屏幕结束时触发的回调
<blockquote><pre>
  GestureDetector(
    onHorizontalDragEnd: (DragEndDetails details) {
      print('${details.localPosition.dx}, ${details.localPosition.dy}');
    },
    child: Container(
      color: Colors.green,
      width: 50,
      height: 50,
    ),
  )
</pre></blockquote>

<h3>onHorizontalDragCancel</h3>
用户水平方向拖动屏幕取消时触发的回调
<blockquote><pre>
  GestureDetector(
    onHorizontalDragCancel: () {
      print('onHorizontalDragCancel');
    },
    child: Container(
      color: Colors.green,
      width: 50,
      height: 50,
    ),
  )
</pre></blockquote> 

<h3>onForcePressStart</h3>
用户开始用力按压时触发的回调
<blockquote><pre>
  GestureDetector(
    onForcePressStart: (ForcePressDetails details) {
      print('${details.pressure}');
    },
    child: Container(
      color: Colors.green,
      width: 50,
      height: 50,
    ),
  )
</pre></blockquote>

<h3>onForcePressEnd</h3>
用户结束用力按压时触发的回调
<blockquote><pre>
  GestureDetector(
    onForcePressEnd: (ForcePressEndDetails details) {
      print('${details.pressure}');
    },
    child: Container(
      color: Colors.green,
      width: 50,
      height: 50,
    ),
  )
</pre></blockquote>

<h3>onForcePressPeak</h3>
用户用力按压达到峰值时触发的回调
<blockquote><pre>
  GestureDetector(
    onForcePressPeak: (ForcePressPeakDetails details) {
      print('${details.pressure}');
    },
    child: Container(
      color: Colors.green,
      width: 50,
      height: 50,
    ),
  )
</pre></blockquote>

<h3>onForcePressUpdate</h3>
用户用力按压更新时触发的回调
<blockquote><pre>
  GestureDetector(
    onForcePressUpdate: (ForcePressUpdateDetails details) {
      print('${details.pressure}');
    },
    child: Container(
      color: Colors.green,
      width: 50,
      height: 50,
    ),
  )
</pre></blockquote>

<h3>onPanDown</h3>
用户拖动屏幕时触发的回调
<blockquote><pre>
  GestureDetector(
    onPanDown: (DragDownDetails details) {
      print('${details.localPosition.dx}, ${details.localPosition.dy}');
    },
    child: Container(
      color: Colors.green,
      width: 50,
      height: 50,
    ),
  )
</pre></blockquote>

<h3>onPanStart</h3>
用户拖动屏幕开始时触发的回调
<blockquote><pre>
  GestureDetector(
    onPanStart: (DragStartDetails details) {
      print('${details.localPosition.dx}, ${details.localPosition.dy}');
    },
    child: Container(
      color: Colors.green,
      width: 50,
      height: 50,
    ),
  )
</pre></blockquote>

<h3>onPanUpdate</h3>
用户拖动屏幕时触发的回调
<blockquote><pre>
  GestureDetector(
    onPanUpdate: (DragUpdateDetails details) {
      print('${details.localPosition.dx}, ${details.localPosition.dy}');
    },
    child: Container(
      color: Colors.green,
      width: 50,
      height: 50,
    ),
  )
</pre></blockquote>

<h3>onPanEnd</h3>
用户拖动屏幕结束时触发的回调
<blockquote><pre>
  GestureDetector(
    onPanEnd: (DragEndDetails details) {
      print('${details.velocity}');
    },
    child: Container(
      color: Colors.green,
      width: 50,
      height: 50,
    ),
  )
</pre></blockquote>

<h3>onPanCancel</h3>
用户拖动屏幕取消时触发的回调
<blockquote><pre>
  GestureDetector(
    onPanCancel: () {
      print('onPanCancel');
    },
    child: Container(
      color: Colors.green,
      width: 50,
      height: 50,
    ),
  )
</pre></blockquote>

<h3>onScaleStart</h3>
用户缩放屏幕开始时触发的回调
<blockquote><pre>
  GestureDetector(
    onScaleStart: (ScaleStartDetails details) {
      print('${details.focalPoint.dx}, ${details.focalPoint.dy}');
    },
    child: Container(
      color: Colors.green,
      width: 50,
      height: 50,
    ),
  )
</pre></blockquote>

<h3>onScaleUpdate</h3>
用户缩放屏幕时触发的回调
<blockquote><pre>
  GestureDetector(
    onScaleUpdate: (ScaleUpdateDetails details) {
      print('${details.focalPoint.dx}, ${details.focalPoint.dy}');
    },
    child: Container(
      color: Colors.green,
      width: 50,
      height: 50,
    ),
  )
</pre></blockquote>

<h3>onScaleEnd</h3>
用户缩放屏幕结束时触发的回调
<blockquote><pre>
  GestureDetector(
    onScaleEnd: (ScaleEndDetails details) {
      print('${details.velocity}');
    },
    child: Container(
      color: Colors.green,
      width: 50,
      height: 50,
    ),
  )
</pre></blockquote>

<h3>dragStartBehavior</h3>
控制拖动手势的开始行为，值可以是 start 或 down。
<blockquote><pre>
  GestureDetector(
    dragStartBehavior: DragStartBehavior.down,
    child: Container(
      color: Colors.green,
      width: 50,
      height: 50,
    ),
  )
</pre></blockquote>

<h3>trackpadScrollCausesScale</h3>
是否由跟踪板滚动引起缩放，默认为false
<blockquote><pre>
  GestureDetector(
    trackpadScrollCausesScale: true,
    child: Container(
      color: Colors.green,
      width: 50,
      height: 50,
    ),
  )
</pre></blockquote>