Flutter（二十八）NotificationListener

在widget树中，子widget滚动时会向上发送notification，通过NotificationListener可以监控到该notification。NotificationListener也是一个widget，可以将被监控的widget放入其child内。

NotificationListener

const NotificationListener({
    Key key,
    @required this.child,  被监控的子widget树
    this.onNotification,  监控到notification后的回调方法。
  }) 

• onNotification(ScrollNotification notification) , 此方法需要一个返回值，表示是否拦截住notification，如果是true，那么notifcation到此为止；如果是false，那么notification会继续向更外层widget传递。参数ScrollNotification包含了监听到的信息。
• ScrollNotification

ScrollNotification({
    @required this.metrics,   所有信息都在这里存储
    @required this.context,
  });

• print(metrics.pixels);// 当前位置
• print(metrics.atEdge);//是否在顶部或底部
• print(metrics.axis);//垂直或水平滚动
• print(metrics.axisDirection);// 滚动方向是down还是up
• print(metrics.extentAfter);//视口底部距离列表底部有多大
• print(metrics.extentBefore);//视口顶部距离列表顶部有多大
• print(metrics.extentInside);//视口范围内的列表长度
• print(metrics.maxScrollExtent);//最大滚动距离，列表长度-视口长度
• print(metrics.minScrollExtent);//最小滚动距离
• print(metrics.viewportDimension);//视口长度
• print(metrics.outOfRange);//是否越过边界

image.png

class _MyHomePageState extends State<MyHomePage> {


  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: NotificationListener<ScrollNotification>(
        onNotification: (ScrollNotification notification){
          ScrollMetrics metrics = notification.metrics;
          print(metrics.pixels);// 当前位置
          print(metrics.atEdge);//是否在顶部或底部
          print(metrics.axis);//垂直或水平滚动
          print(metrics.axisDirection);// 滚动方向是down还是up
          print(metrics.extentAfter);//视口底部距离列表底部有多大
          print(metrics.extentBefore);//视口顶部距离列表顶部有多大
          print(metrics.extentInside);//视口范围内的列表长度
          print(metrics.maxScrollExtent);//最大滚动距离，列表长度-视口长度
          print(metrics.minScrollExtent);//最小滚动距离
          print(metrics.viewportDimension);//视口长度
          print(metrics.outOfRange);//是否越过边界
          print('------------------------');
          return true;
        },
          child: ListView.builder(
            itemExtent: 50,
              itemCount: 50,
              itemBuilder: (BuildContext context,int index){
              return ListTile(title: Text(index.toString()),);
              },
          ),
      ),
    );
  }
}

输出值：

I/flutter (30825): 1896.5714285714284
I/flutter (30825): true
I/flutter (30825): Axis.vertical
I/flutter (30825): AxisDirection.down
I/flutter (30825): 0.0
I/flutter (30825): 1896.5714285714284
I/flutter (30825): 603.4285714285714
I/flutter (30825): 1896.5714285714284
I/flutter (30825): 0.0
I/flutter (30825): 603.4285714285714
I/flutter (30825): false
I/flutter (30825): ------------------------