Flutter 初识：手势和交互控件

GestureDetector

GestureDetector 是一个 Flutter widget，用于检测各种手势（如点击、双击、长按、拖动等）并响应这些手势。它通过提供一系列回调函数，让开发者能够灵活地处理用户的交互行为

属性解析

GestureDetector({
    super.key,
    this.child,
    this.onTapDown,
    this.onTapUp,
    this.onTap,
    this.onTapCancel,
    this.onSecondaryTap,
    this.onSecondaryTapDown,
    this.onSecondaryTapUp,
    this.onSecondaryTapCancel,
    this.onTertiaryTapDown,
    this.onTertiaryTapUp,
    this.onTertiaryTapCancel,
    this.onDoubleTapDown,
    this.onDoubleTap,
    this.onDoubleTapCancel,
    this.onLongPressDown,
    this.onLongPressCancel,
    this.onLongPress,
    this.onLongPressStart,
    this.onLongPressMoveUpdate,
    this.onLongPressUp,
    this.onLongPressEnd,
    this.onSecondaryLongPressDown,
    this.onSecondaryLongPressCancel,
    this.onSecondaryLongPress,
    this.onSecondaryLongPressStart,
    this.onSecondaryLongPressMoveUpdate,
    this.onSecondaryLongPressUp,
    this.onSecondaryLongPressEnd,
    this.onTertiaryLongPressDown,
    this.onTertiaryLongPressCancel,
    this.onTertiaryLongPress,
    this.onTertiaryLongPressStart,
    this.onTertiaryLongPressMoveUpdate,
    this.onTertiaryLongPressUp,
    this.onTertiaryLongPressEnd,
    this.onVerticalDragDown,
    this.onVerticalDragStart,
    this.onVerticalDragUpdate,
    this.onVerticalDragEnd,
    this.onVerticalDragCancel,
    this.onHorizontalDragDown,
    this.onHorizontalDragStart,
    this.onHorizontalDragUpdate,
    this.onHorizontalDragEnd,
    this.onHorizontalDragCancel,
    this.onForcePressStart,
    this.onForcePressPeak,
    this.onForcePressUpdate,
    this.onForcePressEnd,
    this.onPanDown,
    this.onPanStart,
    this.onPanUpdate,
    this.onPanEnd,
    this.onPanCancel,
    this.onScaleStart,
    this.onScaleUpdate,
    this.onScaleEnd,
    this.behavior,
    this.excludeFromSemantics = false,
    this.dragStartBehavior = DragStartBehavior.start,
    this.trackpadScrollCausesScale = false,
    this.trackpadScrollToScaleFactor = kDefaultTrackpadScrollToScaleFactor,
    this.supportedDevices,
  })

• key
  类型：Key?
  说明：控件的键值，用于标识控件。
• child
  类型：Widget?
  说明：被包裹的子 widget，该子 widget 会响应手势。
• onTapDown
  类型：GestureTapDownCallback?
  说明：用户手指轻触屏幕时调用的回调函数。
• onTapUp
  类型：GestureTapUpCallback?
  说明：用户手指在屏幕上抬起时调用的回调函数。
• onTap
  类型：GestureTapCallback?
  说明：用户轻触屏幕并迅速抬起时调用的回调函数。
• onTapCancel
  类型：GestureTapCancelCallback?
  说明：轻触操作被取消时调用的回调函数。
• onSecondaryTap / onSecondaryTapDown / onSecondaryTapUp / onSecondaryTapCancel
  类型：类似以上手势的回调函数，但用于次要（右键）点击手势。
• onTertiaryTapDown / onTertiaryTapUp / onTertiaryTapCancel
  类型：类似以上手势的回调函数，但用于第三种点击手势。
• onDoubleTapDown / onDoubleTap / onDoubleTapCancel
  类型：类似以上手势的回调函数，但用于双击手势。
• onLongPressDown / onLongPressCancel / onLongPress / onLongPressStart / onLongPressMoveUpdate / onLongPressUp / onLongPressEnd
  类型：类似以上手势的回调函数，但用于长按手势。
• onSecondaryLongPressDown / onSecondaryLongPressCancel / onSecondaryLongPress / onSecondaryLongPressStart / onSecondaryLongPressMoveUpdate / onSecondaryLongPressUp / onSecondaryLongPressEnd
  类型：类似以上手势的回调函数，但用于次要（右键）长按手势。
• onTertiaryLongPressDown / onTertiaryLongPressCancel / onTertiaryLongPress / onTertiaryLongPressStart / onTertiaryLongPressMoveUpdate / onTertiaryLongPressUp / onTertiaryLongPressEnd
  类型：类似以上手势的回调函数，但用于第三种长按手势。
• onVerticalDragDown / onVerticalDragStart / onVerticalDragUpdate / onVerticalDragEnd / onVerticalDragCancel
  类型：类似以上手势的回调函数，但用于垂直拖动手势。
• onHorizontalDragDown / onHorizontalDragStart / onHorizontalDragUpdate / onHorizontalDragEnd / onHorizontalDragCancel
  类型：类似以上手势的回调函数，但用于水平拖动手势。
• onForcePressStart / onForcePressPeak / onForcePressUpdate / onForcePressEnd
  类型：类似以上手势的回调函数，但用于压力感应手势。
• onPanDown / onPanStart / onPanUpdate / onPanEnd / onPanCancel
  类型：类似以上手势的回调函数，但用于平移手势。
• onScaleStart / onScaleUpdate / onScaleEnd
  类型：类似以上手势的回调函数，但用于缩放手势。
• behavior
  类型：HitTestBehavior?
  说明：定义命中测试行为。
• excludeFromSemantics
  类型：bool
  说明：是否从语义树中排除该 widget，默认值为 false。
• dragStartBehavior
  类型：DragStartBehavior
  说明：定义拖动手势的起始行为，默认值为 DragStartBehavior.start。
• trackpadScrollCausesScale
  类型：bool
  说明：是否允许触控板滚动引起缩放，默认值为 false。
• trackpadScrollToScaleFactor
  类型：double
  说明：触控板滚动转换为缩放的比例因子，默认值为 kDefaultTrackpadScrollToScaleFactor。
• supportedDevices
  类型：Set?
  说明：定义支持哪些设备类型产生的事件。

示例

class GestureDetectorExample extends StatefulWidget {
  @override
  _GestureDetectorExampleState createState() => _GestureDetectorExampleState();
}

class _GestureDetectorExampleState extends State {
  String _gesture = 'No Gesture detected';

  void _updateText(String gesture) {
    setState(() {
      _gesture = gesture;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Gesture Detector Example')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            GestureDetector(
              onTap: () => _updateText("Tap"),
              onDoubleTap: () => _updateText("Double Tap"),
              onLongPress: () => _updateText("Long Press"),
              child: Container(
                color: Colors.blue,
                width: 200,
                height: 200,
                child: Center(
                    child:
                        Text(_gesture, style: TextStyle(color: Colors.white))),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

 
 

InkWell

InkWell 是一个 Flutter widget，用于实现点击效果（如波纹效果）。它常用于需要响应用户点击事件的地方，例如按钮。

属性解析

const InkWell({
    super.key,
    super.child,
    super.onTap,
    super.onDoubleTap,
    super.onLongPress,
    super.onTapDown,
    super.onTapUp,
    super.onTapCancel,
    super.onSecondaryTap,
    super.onSecondaryTapUp,
    super.onSecondaryTapDown,
    super.onSecondaryTapCancel,
    super.onHighlightChanged,
    super.onHover,
    super.mouseCursor,
    super.focusColor,
    super.hoverColor,
    super.highlightColor,
    super.overlayColor,
    super.splashColor,
    super.splashFactory,
    super.radius,
    super.borderRadius,
    super.customBorder,
    bool? enableFeedback = true,
    super.excludeFromSemantics,
    super.focusNode,
    super.canRequestFocus,
    super.onFocusChange,
    super.autofocus,
    super.statesController,
    super.hoverDuration,
  })

• key
  类型：Key?
  说明：控件的键值，用于标识控件。
• child
  类型：Widget?
  说明：被包裹的子 widget，会响应点击和其他手势。
• onTap
  类型：GestureTapCallback?
  说明：点击时调用的回调函数。
  签名：void Function()
• onDoubleTap
  类型：GestureTapCallback?
  说明：双击时调用的回调函数。
  签名：void Function()
• onLongPress
  类型