Flutter中的点击事件和回调

Flutter中的点击事件和回调,第1张

        不同于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,反应比较灵敏一点d出的软键盘无法关闭,尽可能使用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中监听到了。。。

欢迎分享,转载请注明来源:内存溢出

原文地址: https://outofmemory.cn/web/992101.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-05-21
下一篇 2022-05-21

发表评论

登录后才能评论

评论列表(0条)

保存