点击事件响应
GestureDetector()只列举常用属性
GestureDetector参数 | 类型 | 说明 |
---|---|---|
onTap | GestureTapCallback | 单击响应 |
onDoubleTap | GestureTapCallback | 双击响应 |
onLongPress | GestureLongPressCallback | 长按响应 |
onTapUp | GestureTapUpCallback | 单击按下响应 |
onTapDown | GestureTapDownCallback | 单击响应抬起 |
onTapCancel | GestureTapCancelCallback | 取消 |
onPanUpdate | GestureDragUpdateCallback | 获取移动坐标 |
Container(
color: Colors.white,
child: GestureDetector(
onTap: () {
print("GestureDetector:点击了");
},
onDoubleTap: () {
print("GestureDetector:双击了");
},
onLongPress: () {
print("GestureDetector:长按了");
},
onTapUp: (TagUp) {
print("GestureDetector:单击抬起:${TagUp}");
},
onTapDown: (tapDown) {
print("GestureDetector:单击按下${tapDown}");
},
onTapCancel: (){
print("GestureDetector:取消了");
},
child: Icon(
Icons.android,
size: 100,
),
)
);
单击迅速抬起:
执行顺序为:onTapDown() -->onTapUp()–>onTap()
双击:
可以看出,双击只显示双击的响应事件,不执行onTapDown(),onTapUp()
长按
执行顺序:onTapDown()–>onTapCancel()–>onLongpress()
手势监听
先看看效果图吧:
- 1.通过onPanUpdate()来监听黑色android图标的坐标
- 2.通过Positioned()组件来设置紫色android的相应位置
- 3.对紫色按钮单击监听,点击紫色按钮回到左上角初始位置
上一章:Flutter 如何创建Flutter路由与导航(1.4)
下一章:Flutter Widget生命周期以及应用周期(1.6)
原创不易,您的点赞就是对我最大的鼓励,请留下您的点赞吧,谢谢啦~