Flutter中ListView和GridView滚动的监听

1.监听方式

1.1 controller监听

• 可以设置默认的offset的值
• 监听滚动，也可以监听滚动的位置

import 'package:flutter/material.dart';

//函数入口
main() =>runApp(MyApp());

class MyApp extends StatelessWidget {

  //重写方法
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
      home: JCHomePage() ,
    );
  }
}

StatefulWidget

• 创建一个状态类

class JCHomePage extends StatefulWidget {

  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    return _JCHomeStatue();
  }

}


class _JCHomeStatue extends State<JCHomePage>{
  //初始化一个偏移量为100 向上偏移的100
  ScrollController controller = ScrollController(initialScrollOffset: 100);

  var _flag = false;


  //重写生命周期方法
  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    controller.addListener((){

      //更新状态
      setState(() {
        _flag = controller.offset >= 1000;
      });
      print("监听滚动的位置 ${controller.offset}");

    });
  }

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(
        title: Text("滚动的监听方式"),
      ),
      body: ListView.builder(
        controller: controller,
        itemCount: 100,
        itemBuilder: (BuildContext ctx ,int index){
          return ListTile(
            leading: Icon(Icons.people),
            trailing: Icon(Icons.delete),
            title: Text("恋人${index + 1}"),
          );

        },
      ),
      floatingActionButton: _flag ?  FloatingActionButton(
        child: Icon(Icons.arrow_upward),
        onPressed: (){
          setState(() {
            controller.animateTo(0, duration: Duration(seconds: 1), curve: Curves.easeIn);
          });
        },
      ):null,
    );
  }
}

当 滚动的 距离 大于 1000时 显示 回到顶部的按钮

1.2 NotificationListener 通过监听

class JCHomePage extends StatefulWidget {

  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    return _JCHomeStatue();
  }

}


class _JCHomeStatue extends State<JCHomePage>{
  //初始化一个偏移量为100 向上偏移的100
  ScrollController controller = ScrollController(initialScrollOffset: 100);
  var _flag = false;

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(
        title: Text("滚动的监听方式"),
      ),

      //添加一个通知(系统会自动调用)
      body: NotificationListener(
        onNotification:(ScrollNotification notification){

          //开始滚动
          if(notification is ScrollStartNotification){
            print("开始滚动");

          } else if (notification is ScrollUpdateNotification){
            // 更新滚动
            setState(() {
              _flag = notification.metrics.pixels >= 1000;
            });
            print("正在滚动---总滚动的距离${notification.metrics.maxScrollExtent},----已经滚动的距离${notification.metrics.pixels}");

          } else if (notification is ScrollEndNotification){
            //结束滚动
            print("结束滚动");
          }

          // 返回值是防止冒泡， false是可以冒泡
          return true;
        },
        child: ListView.builder(
          controller: controller,
          itemCount: 100,
          itemBuilder: (BuildContext ctx ,int index){
            return ListTile(
              leading: Icon(Icons.people),
              trailing: Icon(Icons.delete),
              title: Text("恋人${index + 1}"),
            );

          },
        ),
      ),
      floatingActionButton: _flag ?  FloatingActionButton(
        child: Icon(Icons.arrow_upward),
        onPressed: (){
          setState(() {
            controller.animateTo(0, duration: Duration(seconds: 1), curve: Curves.easeIn);
          });
        },
      ):null,
    );
  }
}