flutter-ListView滚动监听与注意事项

2,587 阅读3分钟

NotificationListener

ListView在使用过程中,我们可能要知道滚动视图ListView滚动到了那里(例如:下拉刷新、上拉加载),因此flutter中就提供了 NotificationListener,以供开发者监听滚动情况

其使用如下所示,只需要将child指向我们的ListView即可,通过 onNotification 监听回调滚动结果

默认使用,如下所示,NotificationListener监听类型是默认的 ScrollNotification 类型,即:滚动后回调

//后面的泛型不填也默认为 ScrollNotification
NotificationListener<ScrollNotification>(
  //用于监听组件的操作事件,这里监听滚动视图
  onNotification: (ScrollNotification notification) {
    print('notification');
    print(notification.metrics);
    //推荐返回为false,若返回为 true,则事件会阻止向上冒泡,不推荐(除非有必要)
    return false;
  },
  child: ListView(
      children: [],
  )

psNotificationListener由于事件是以通知方式一层一层向上传递的,因此不会出现冲突等类似问题,使用时比较推荐,可以避免很多隐晦问题

滚动类型 ScrollNotification

ScrollNotification: 为一个抽象类,其默认有很多子类,如下所示,声明不同的泛型,回调的则不同

ScrollStartNotification:滑动开始通知

ScrollUpdateNotification:滑动中通知,滑动过程中会一直回调

ScrollEndNotification:滑动结束通知

OverscrollNotification:滑动位置未改变通知,这个一般只有在滑动到列表边界才会回调,且需要设置不可越界,即physics为ClampingScrollPhysics,这里要注意安卓默认是这样,但是ios平台默认是弹性边界

UserScrollNotification:用户滑动通知,这个跟ScrollUpdateNotification的区别是他只在滑动开始后以及滑动结束后回调

回调参数 metrics

pixels:当前滑动的位置,使用最多,下拉刷新、上拉加载一般用的都是这个属性

atEdge:是否在顶部或底部

axis:垂直或水平滚动

axisDirection:滚动方向描述是down还是up,这个受列表reverse影响,正序就是down倒序就是up,并不代表列表是上滑还是下滑

extentAfter:视口底部距离列表底部有多大

extentBefore:视口顶部距离列表顶部有多大

extentInside:视口范围内的列表长度

maxScrollExtent:最大滚动距离,列表长度-视口长度

minScrollExtent:最小滚动距离

viewportDimension:沿滚动方向视口的长度

outOfRange:是否越过边界

ListView 使用注意

ListView和原生开发的时候类似,其需要有一个固定高度

:内容高度是固定的,若想知道内容是否大于外部滚动视图,因此ListView高度宽高必须固定,否则无法处理内滚动问题

如下所示,当listView上面需要有内容时,例如:搜索框,因此我们进行如下布局(会报错):

Column(
  children: [
    Container(
        height: 20,
    ),
    //此时ListView不是占满整个屏幕了,高度未定,其不会自动填满整个屏幕
    ListView(
        children: [
        ],
    ),
  ],
)

我们使用Expanded包括 ListView 填充剩余空间,完美解决

Column(
  children: [
    //listView上面有个搜索一样的东西
    Container(
      height: 20,
    ),
    Expanded(
      child: ListView(
        children: [
        ],
      ),
    ),
  ],
)