Flutter ScrollView 观察器

这是一个为 ListView 和 SliverListView 设计的组件，用于监听哪些部分正在显示。

安装

将 scrollview_observer 添加到你的 pubspec.yaml 文件

dependencies:
  scrollview_observer: ^0.0.1

在将使用它的文件中导入 scrollview_observer

import 'package:scrollview_observer/scrollview_observer.dart';

入门

BuildContext? _sliverListViewContext;

创建一个 ListView 并记录其 builder 回调中的 BuildContext

ListView _buildListView() {
  return ListView.separated(
    itemBuilder: (ctx, index) {
      if (_sliverListViewContext != ctx) {
        _sliverListViewContext = ctx;
      }
      return _buildListItemView(index);
    },
    separatorBuilder: (ctx, index) {
      return _buildSeparatorView();
    },
    itemCount: 50,
  );
}

创建 ListViewObserver

  • child: 将 ListView 作为 ListViewObserver 的子组件
  • sliverListContexts: 在此回调中，我们需要返回所有需要被观察的 ListView 的 BuildContext
  • onObserve: 此回调可以监听当前正在显示的子组件的信息

ListViewObserver(
  child: _buildListView(),
  sliverListContexts: () {
    return [if (_sliverListViewContext != null) _sliverListViewContext!];
  },
  onObserve: (resultMap) {
    final model = resultMap[_sliverListViewContext];
    if (model == null) return;

    // Prints the first child widget that is currently being displayed
    print('firstChild.index -- ${model.firstChild.index}');

    // Prints the index of all child widgets those are currently being displayed
    print('displaying -- ${model.displayingChildIndexList}');
  },
)

默认情况下，只有在滚动时才会观察 ListView 的相关数据。

如果需要，你可以使用 ListViewOnceObserveNotification 手动触发观察。

ListViewOnceObserveNotification().dispatch(_sliverListViewContext);

示例

GitHub

查看 Github