Flutter 如何进行Flutter点击事件响应和手势监听(1.5)

如何进行Flutter点击事件响应和手势监听

点击事件响应

GestureDetector()只列举常用属性

GestureDetector参数类型说明
onTapGestureTapCallback单击响应
onDoubleTapGestureTapCallback双击响应
onLongPressGestureLongPressCallback长按响应
onTapUpGestureTapUpCallback单击按下响应
onTapDownGestureTapDownCallback单击响应抬起
onTapCancelGestureTapCancelCallback取消
onPanUpdateGestureDragUpdateCallback获取移动坐标
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)

原创不易,您的点赞就是对我最大的鼓励,请留下您的点赞吧,谢谢啦~

已标记关键词 清除标记
©️2020 CSDN 皮肤主题: 精致技术 设计师:CSDN官方博客 返回首页