美文网首页
滚动通知

滚动通知

作者: follow_er | 来源:发表于2023-04-19 07:25 被阅读0次

Flutter中很多地方使用了通知,如前面介绍的 Scrollable 组件,它在滑动时就会分发滚动通知(ScrollNotification),而 Scrollbar 正是通过监听 ScrollNotification 来确定滚动条位置的。

下面是一个监听可滚动组件滚动通知的例子:

NotificationListener(
  onNotification: (notification){
    switch (notification.runtimeType){
      case ScrollStartNotification: print("开始滚动"); break;
      case ScrollUpdateNotification: print("正在滚动"); break;
      case ScrollEndNotification: print("滚动停止"); break;
      case OverscrollNotification: print("滚动到边界"); break;
    }
  },
  child: ListView.builder(
    itemCount: 100,
    itemBuilder: (context, index) {
      return ListTile(title: Text("$index"),);
    }
  ),
);

上例中的滚动通知如ScrollStartNotification、ScrollUpdateNotification等都是继承自ScrollNotification类,不同类型的通知子类会包含不同的信息,比如ScrollUpdateNotification有一个scrollDelta属性,它记录了移动的位移,其他通知属性读者可以自己查看SDK文档。

上例中,我们通过NotificationListener来监听子ListView的滚动通知的,NotificationListener定义如下:

class NotificationListener<T extends Notification> extends StatelessWidget {
  const NotificationListener({
    Key key,
    required this.child,
    this.onNotification,
  }) : super(key: key);
 ...//省略无关代码 
}  

我们可以看到:

NotificationListener 继承自StatelessWidget类,所以它可以直接嵌套到 Widget 树中。

NotificationListener 可以指定一个模板参数,该模板参数类型必须是继承自Notification;当显式指定模板参数时,NotificationListener 便只会接收该参数类型的通知。举个例子,如果我们将上例子代码改为:

//指定监听通知的类型为滚动结束通知(ScrollEndNotification)
NotificationListener<ScrollEndNotification>(
  onNotification: (notification){
    //只会在滚动结束时才会触发此回调
    print(notification);
  },
  child: ListView.builder(
    itemCount: 100,
    itemBuilder: (context, index) {
      return ListTile(title: Text("$index"),);
    }
  ),
);

上面代码运行后便只会在滚动结束时在控制台打印出通知的信息。

onNotification回调为通知处理回调,其函数签名如下:

typedef NotificationListenerCallback<T extends Notification> = bool Function(T notification);
它的返回值类型为布尔值,当返回值为true时,阻止冒泡,其父级Widget将再也收不到该通知;当返回值为false 时继续向上冒泡通知。

Flutter的UI框架实现中,除了在可滚动组件在滚动过程中会发出ScrollNotification之外,还有一些其他的通知,如SizeChangedLayoutNotification、KeepAliveNotification 、LayoutChangedNotification等,Flutter正是通过这种通知机制来使父元素可以在一些特定时机来做一些事情

通知
https://book.flutterchina.club/chapter8/notification.html#_8-6-1-%E7%9B%91%E5%90%AC%E9%80%9A%E7%9F%A5

相关文章

  • 微信小程序-通知滚动小提示

    1 . 概述 我们在学习微信小程序或者做项目时,应该会遇到滚动通知效果情况,那么这个滚动通知功能我们应该怎么编写呢...

  • iOS获取键盘的高度

    监听键盘的通知 通过通知方法获取键盘Rect 跟 Duration 当滚动tableview时,就收起键盘: 不同...

  • iOS简单的滚动label效果

    滚动通知,最近有人跟我说滚动通知怎么设置都不成功,就是类似于跑马灯一样的效果,其实这是一个很简单的功能。我们就用U...

  • 微信小程序-滚动消息通知

    这次我主要想总结一下微信小程序实现上下滚动消息提醒,主要是利用swiper组件来实现,swiper组件在小程序中是...

  • 微信小程序公告滚动通知

    微信小程序实现上下滚动消息提醒,主要是利用swiper组件来实现,swiper组件在小程序中是滑块视图容器。 通过...

  • 监听scrollview停止滚动

    方法1 滚动开始 滚动结束: 手动停止滚动 自动停止滚动 方法2 滚动开始 滚动结束

  • 包含多个scrollView时, 点击状态栏滚回顶部

    先在pch写一个宏 在AppDelegate.m 在初始化需要滚动的scrollView的那个类中, 注册通知 通...

  • css滚动

    布局:水平滚动,垂直滚动 垂直滚动: 水平滚动: css样式:

  • css滚动

    布局:水平滚动,垂直滚动 垂直滚动: 水平滚动: css样式:

  • CSS 隐藏滚动条 但可以滚动

    垂直滚动,用鼠标滚轮滚动 横向滚动 其他垂直滚动方法

网友评论

      本文标题:滚动通知

      本文链接:https://www.haomeiwen.com/subject/rnqknrtx.html