logo-dark

    [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.   }

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

    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，则会传递





    回复

    使用道具 举报

    返回列表
    高级模式
    B Color Image Link Quote Code Smilies
    您需要登录后才可以回帖 登录 | 创建账号

    本版积分规则

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

    GMT+8, 2025-1-29 07:18 , Processed in 0.099653 second(s), 26 queries , Gzip On.

    N2N1 It社区 n2n1.cn

    Copyright © 2001-2021,MeiCheng.

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