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