Flutter学习笔记26-监听滚动事件

对于滚动的视图，我们经常需要监听它的一些滚动事件，
在Flutter中监听滚动相关的内容由两部分组成：ScrollController和ScrollNotification。

ScrollController

在Flutter中，Widget并不是最终渲染到屏幕上的元素（真正渲染的是RenderObject），因此通常这种监听事件以及相关的信息并不能直接从Widget中获取，而是必须通过对应的Widget的Controller来实现。
ListView、GridView的组件控制器是ScrollController，我们可以通过它来获取视图的滚动信息，并且可以调用里面的方法来更新视图的滚动位置。通常情况下，我们会根据滚动的位置来改变一些Widget的状态信息，所以ScrollController通常会和StatefulWidget一起来使用，并且会在其中控制它的初始化、监听、销毁等事件。
ScrollController常用的属性和方法：

• offset
  可滚动组件当前的滚动位置。
• jumpTo(double offset)、animateTo(double offset,...)
  这两个方法用于跳转到指定的位置，它们不同之处在于，后者在跳转时会执行一个动画，而前者不会。

ScrollController间接继承自Listenable，我们可以根据ScrollController来监听滚动事件。

当滚动到1000位置的时候，显示一个回到顶部的按钮。代码示例：

class ScrollControllerDemo extends StatefulWidget {
  @override
  _ScrollControllerDemoState createState() => _ScrollControllerDemoState();
}

class _ScrollControllerDemoState extends State {
  ScrollController _controller;

  // 是否显示“返回到顶部”按钮
  bool _isShowTopBtn = false;

  @override
  void initState() {
    super.initState();
    _controller = ScrollController();

    _controller.addListener(() {
      // 打印滚动位置
      print(_controller.offset);
      if (_controller.offset < 1000 && _isShowTopBtn) {
        setState(() {
          _isShowTopBtn = false;
        });
      } else if (_controller.offset >= 1000 && !_isShowTopBtn) {
        setState(() {
          _isShowTopBtn = true;
        });
      }
    });
  }

  @override
  void dispose() {
    // 为了避免内存泄露，需要调用_controller.dispose
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('ScrollController Demo')),
      body: Scrollbar(
        child: ListView.builder(
          itemBuilder: (BuildContext context, int index) {
            return ListTile(title: Text('$index'));
          },
          itemCount: 100,
          itemExtent: 50.0,
          controller: _controller,
        ),
      ),
      floatingActionButton: !_isShowTopBtn
          ? null
          : FloatingActionButton(
              child: Icon(Icons.arrow_upward),
              onPressed: () {
                _controller.animateTo(0,
                    duration: Duration(milliseconds: 200), curve: Curves.ease);
              },
            ),
    );
  }
}

代码运行效果图如下：

NotificationListener

如果希望监听什么时候开始滚动，什么时候结束滚动，这个时候可以通过NotificationListener监听。
NotificationListener是一个Widget，模板参数T是想监听的通知类型，如果省略，则所有类型通知都会被监听，如果指定特定类型，则只有该类型的通知会被监听。
NotificationListener需要一个onNotification回调函数，用于实现监听处理逻辑。该回调可以返回一个布尔值，代表是否阻止该事件继续向上冒泡，如果为true时，则冒泡终止，事件停止向上传播，如果不返回或者返回值为false 时，则冒泡继续。
通过NotificationListener监听滚动事件和通过ScrollController有两个主要的不同：
通过NotificationListener可以在从可滚动组件到widget树根之间任意位置都能监听。而ScrollController只能和具体的可滚动组件关联后才可以。
收到滚动事件后获得的信息不同；NotificationListener在收到滚动事件时，通知中会携带当前滚动位置和视图的一些信息，而ScrollController只能获取当前滚动位置。

列表滚动, 并且在中间显示滚动进度。代码示例：

class ScrollNotificationDemo extends StatefulWidget {
  @override
  _ScrollNotificationDemoState createState() => _ScrollNotificationDemoState();
}

class _ScrollNotificationDemoState extends State {
  // 保存进度百分比
  String _progress = '0%';

  @override
  Widget build(BuildContext context) {
    return Scrollbar(
      child: NotificationListener(
        onNotification: (ScrollNotification notification) {
          // 判断监听事件的类型
          if (notification is ScrollStartNotification) {
            print('开始滚动');
          } else if (notification is ScrollUpdateNotification) {
            // 当前滚动的位置和总长度
            double currentPixel = notification.metrics.pixels;
            double totalPixel = notification.metrics.maxScrollExtent;
            double progress = currentPixel / totalPixel;
            setState(() {
              _progress = '${(progress * 100).toInt()}%';
            });
            print(
                "正在滚动：${notification.metrics.pixels} - ${notification.metrics.maxScrollExtent}");
          } else if (notification is ScrollEndNotification) {
            print("结束滚动....");
          }
          return false;
        },
        child: Stack(
          alignment: Alignment.center,
          children: [
            ListView.builder(
              itemBuilder: (BuildContext context, int index) {
                return ListTile(title: Text("$index"));
              },
              itemExtent: 50.0,
              itemCount: 100,
            ),
            CircleAvatar(
              radius: 30.0,
              child: Text(_progress),
              backgroundColor: Colors.black54,
            ),
          ],
        ),
      ),
    );
  }
}

代码运行效果图如下：

在接收到滚动事件时，参数类型为ScrollNotification，它包括一个metrics属性，它的类型是ScrollMetrics，该属性包含当前视图及滚动位置等信息：

• pixels
  当前滚动位置。
• maxScrollExtent
  最大可滚动长度。
• extentBefore
  滑出顶部的长度；此示例中相当于顶部滑出屏幕上方的列表长度。
• extentInside
  内部长度；此示例中屏幕显示的列表部分的长度。
• extentAfter：
  列表中未滑入V部分的长度；此示例中列表底部未显示到屏幕范围部分的长度。
• atEdge
  是否滑到了可滚动组件的边界；此示例中相当于列表顶或底部。

代码传送门