Flutter中的点击事件和回调

最新推荐文章于 2025-11-27 15:54:54 发布

原创最新推荐文章于 2025-11-27 15:54:54 发布 · 5.3k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#flutter #android #回调 #点击

flutter 专栏收录该内容

10 篇文章

订阅专栏

本文介绍了在Flutter中如何使用InkWell和GestureDetector处理点击事件，包括各自支持的触控操作和推荐场景。同时，展示了如何通过接口回调实现点击事件监听。

不同于Android中所有的View可以通过设置点击setOnClickListener { }方法，在Flutter有些widget是不支持直接添加onPress事件的，用法和原生区别很大，列举了常用两种方式。

一、InkWell

InkWell中点击事件分为来管理点击回调和水波动画。

onTap: () // 单击

onDoubleTap: () // 双击

onLongPress: ()// 长按

InkWell(
      onTap: (){},
      child: Container()
)

二、GestureDetector

onTap: () // 单击

onDoubleTap: () // 双击

onLongPress: () // 长按

onTapCancel:() //取消

onTapUp:(e) //松开

onTapDown:(e) //按下

拖动手势主要由

onPanDown //手指按下

onPanUpdate //手指滑动

onPanEnd //滑动结束

onScaleUpdate:(ScaleUpdateDetails e) //缩放

GestureDetector(
  child: Text("点击"),
  onTap: () {}
)

如果没有特殊要求，只相应onTap的话，尽可能用InkWell,，开发中InkWell,反应比较灵敏一点弹出的软键盘无法关闭，尽可能使用GestureDetector。

三、点击事件的回调

在Android中经常定义接口，使用接口回调的方式，在Flutter中也有类似的实现。

1、定义接口

abstract class OnDialogClickListener {
  void onConfirm();
  void onCancel();
}

2、初始化接口数据

class MyDialog extends StatelessWidget {
  final OnDialogClickListener? listener;

  const MyDialog({Key? key, this.listener}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return InkWell(
      child: Container(
        width: 50,
        height: 50,
        color: Colors.blue,
      ),
      onTap: () => {
        listener?.onConfirm(),
        Navigator.of(context).pop(),
      },
    );
  }
}

3、实现接口

class App extends StatelessWidget implements OnDialogClickListener {
  @override
  Widget build(BuildContext context) {
    return MyDialog(
      listener: this,
    );
  }

  @override
  void onCancel() {
    //取消
  }

  @override
  void onConfirm() {
    //确定
  }
}

这样点击时候就可以在onConfirm或者onCancel中监听到了。。。