Flutter手势检测 #

一、GestureDetector #

1.1 基本用法 #

dart
GestureDetector(
  onTap: () => print('Tapped'),
  onDoubleTap: () => print('Double tapped'),
  onLongPress: () => print('Long pressed'),
  child: Container(
    width: 100,
    height: 100,
    color: Colors.blue,
  ),
)

1.2 拖动手势 #

dart
GestureDetector(
  onPanStart: (details) => print('Pan start'),
  onPanUpdate: (details) => print('Pan update: ${details.delta}'),
  onPanEnd: (details) => print('Pan end'),
  child: Container(color: Colors.blue),
)

1.3 缩放手势 #

dart
GestureDetector(
  onScaleStart: (details) => print('Scale start'),
  onScaleUpdate: (details) => print('Scale: ${details.scale}'),
  onScaleEnd: (details) => print('Scale end'),
  child: Container(color: Colors.blue),
)

二、InkWell #

dart
InkWell(
  onTap: () {},
  splashColor: Colors.blue,
  child: Container(
    padding: EdgeInsets.all(16),
    child: Text('InkWell'),
  ),
)

三、总结 #

3.1 手势类型 #

手势 回调
点击 onTap
双击 onDoubleTap
长按 onLongPress
拖动 onPanUpdate
缩放 onScaleUpdate

3.2 下一步 #

让我们学习 平台交互

最后更新:2026-03-28