[flutter] Flutter NotificationListener

[复制链接]
作者
n2n1   发布于2023-9-11 17:34:56 来自河北
flutter
flutter: 分享
1.NotificationListener介绍widget通知监听


2.NotificationListener属性
  • child:widget
  • onNotification:NotificationListenerCallback,返回值true表示消费掉当前通知不再向上一级NotificationListener传递通知,false则会再向上一级NotificationListener传递通知;这里需要注意的是通知是由下而上去传递的,所以才会称作冒泡通知


3.ScrollNotificationScrollNotification是一个抽象类,它的子类还有:
  • ScrollStartNotification:滑动开始通知
  • ScrollUpdateNotification:滑动中通知,滑动过程中会一直回调
  • ScrollEndNotification:滑动结束通知
  • OverscrollNotification:滑动位置未改变通知,这个一般只有在滑动到列表边界才会回调,且需要设置不可越界,即physics为ClampingScrollPhysics,这里要注意安卓默认是这样,但是ios平台默认是弹性边界
  • UserScrollNotification:用户滑动通知,这个跟ScrollUpdateNotification的区别是他指挥有滑动开始后以及滑动结束后回调


4.Notification.ScrollMetrics属性
  • pixels:当前绝对位置
  • atEdge:是否在顶部或底部
  • axis:垂直或水平滚动
  • axisDirection:滚动方向描述是down还是up,这个受列表reverse影响,正序就是down倒序就是up,并不代表列表是上滑还是下滑
  • extentAfter:视口底部距离列表底部有多大
  • extentBefore:视口顶部距离列表顶部有多大
  • extentInside:视口范围内的列表长度
  • maxScrollExtent:最大滚动距离,列表长度-视口长度
  • minScrollExtent:最小滚动距离
  • viewportDimension:沿滚动方向视口的长度
  • outOfRange:是否越过边界


4.使用  
  1.   _myChild() {
  2.     return ListView.builder(
  3.       itemBuilder: (context, index) => ListTile(title: Text('item $index')),
  4.       itemCount: 30,
  5.       reverse: true,
  6.       // physics: BouncingScrollPhysics(),
  7.     );
  8.   }

  9.   @override
  10.   Widget build(BuildContext context) {
  11.     return Scaffold(
  12.       appBar: AppBar(
  13.         title: Text('NotificationListener'),
  14.       ),
  15.       body: NotificationListener<ScrollNotification>(
  16.         onNotification: (notification) {
  17.           ScrollMetrics metrics = notification.metrics;
  18.           print('ScrollNotification####################');
  19.           print('pixels = ${metrics.pixels}');
  20.           print('atEdge = ${metrics.atEdge}');
  21.           print('axis = ${metrics.axis}');
  22.           print('axisDirection = ${metrics.axisDirection}');
  23.           print('extentAfter = ${metrics.extentAfter}');
  24.           print('extentBefore = ${metrics.extentBefore}');
  25.           print('extentInside = ${metrics.extentInside}');
  26.           print('maxScrollExtent = ${metrics.maxScrollExtent}');
  27.           print('minScrollExtent = ${metrics.minScrollExtent}');
  28.           print('viewportDimension = ${metrics.viewportDimension}');
  29.           print('outOfRange = ${metrics.outOfRange}');
  30.           print('ScrollNotification####################');
  31.           return false;
  32.         },
  33.         child: NotificationListener<ScrollUpdateNotification>(
  34.           onNotification: (notification) {
  35.             print('ScrollUpdateNotification####################');
  36.             return false;
  37.           },
  38.           child: NotificationListener<OverscrollNotification>(
  39.             onNotification: (notification) {
  40.               print('OverscrollNotification####################');
  41.               return false;
  42.             },
  43.             child: NotificationListener<ScrollStartNotification>(
  44.               onNotification: (notification) {
  45.                 print('ScrollStartNotification####################');
  46.                 return false;
  47.               },
  48.               child: NotificationListener<ScrollEndNotification>(
  49.                 onNotification: (notification) {
  50.                   print('ScrollEndNotification####################');
  51.                   return false;
  52.                 },
  53.                 child: _myChild(),
  54.               ),
  55.             ),
  56.           ),
  57.         ),
  58.       ),
  59.     );
  60.   }
复制代码

5.系统提供的其他NotificationNotification是所有通知监听的顶级父类,它的子类有:
  • LayoutChangedNotification:这是一个空实现子类,他的子类有ScrollNotification,SizeChangedLayoutNotification
  • SizeChangedLayoutNotification:这是一个空实现子类,一般不会用到
  • DraggableScrollableNotification:DraggableScrollableSheet的拖拽通知,这个后面再介绍
  • OverscrollIndicatorNotification:这是滑动指示器的通知监听,例如Scrollbar,需要注意的是这个只有在滑动到头部或者尾部才会回调,而且滑动布局也需要是不可越界的,即physics为ClampingScrollPhysics
    这里的代码就在上期Flutter(82):Scroll组件之Scrollbar上修改一下:


  1.   @override
  2.   Widget build(BuildContext context) {
  3.     return Scaffold(
  4.       appBar: AppBar(
  5.         title: Text('Scrollbar'),
  6.       ),
  7.       body: NotificationListener<OverscrollIndicatorNotification>(
  8.         onNotification: (notification) {
  9.           //滑动指示器是否在头部 true在前端,false在末端
  10.           print('${notification.leading}');
  11.           return true;
  12.         },
  13.         child: Scrollbar(
  14.           radius: Radius.circular(10),
  15.           thickness: 10,
  16.           child: ListView.builder(
  17.             itemBuilder: (context, index) {
  18.               return ListTile(
  19.                 title: Text('item $index'),
  20.               );
  21.             },
  22.             itemCount: 30,
  23.           ),
  24.         ),
  25.       ),
  26.     );
  27.   }
复制代码

6.自定义Notification这里我们做个简单的演示
  1.   @override
  2.   Widget build(BuildContext context) {
  3.     return Scaffold(
  4.       appBar: AppBar(
  5.         title: Text('Scrollbar'),
  6.       ),
  7.       body: NotificationListener<OverscrollIndicatorNotification>(
  8.         onNotification: (notification) {
  9.           //滑动指示器是否在头部 true在前端,false在末端
  10.           print('${notification.leading}');
  11.           return true;
  12.         },
  13.         child: Scrollbar(
  14.           radius: Radius.circular(10),
  15.           thickness: 10,
  16.           child: ListView.builder(
  17.             itemBuilder: (context, index) {
  18.               return ListTile(
  19.                 title: Text('item $index'),
  20.               );
  21.             },
  22.             itemCount: 30,
  23.           ),
  24.         ),
  25.       ),
  26.     );
  27.   }
复制代码
这里在2级NotificationListener处消费掉当前的通知了,所以不再向1级NotificationListener传递通知了,如果将2级NotificationListener处设置为false,则会传递





回复

使用道具 举报

您需要登录后才可以回帖 登录 | 创建账号

本版积分规则

Archiver|小黑屋|( 冀ICP备2021005463号 )

GMT+8, 2024-5-28 15:33 , Processed in 0.109605 second(s), 26 queries , Gzip On.

N2N1 It社区 n2n1.cn

Copyright © 2001-2021,MeiCheng.

快速回复 返回顶部 返回列表