flutter如何实现顶部停靠的Listview，可滚动到指定posiiton，并监听到当前头部position

先看我实现的效果图

日历滚动视图.gif

刚从原生安卓转flutter，安卓有个库可以实现顶部停靠：se.emilsjolander:stickylistheaders:2.5.2
这个库有两个方法

1.setSelection（int index），可以滚动到list指定位置

2.setOnStickyHeaderChangedListener 当停靠的头部发生改变则触发

agenda_view.getAgendaListView().setOnStickyHeaderChangedListener((l, header, itemPosition, headerId) -> { Log.d(LOG_TAG, String.format("onStickyHeaderChanged, position = %d, headerId = %d", itemPosition, headerId)); });
这两个方法是非常有用的，不过我在flutter没有找到这样的库
ListView不能滚动到指定位置，但是可以监听到滚动超出屏幕的距离offset，如果想要计算当前position，那么item的高度要一致，
计算如下：int position=offset/item高度；

对于item的高度不一致呢？ListView就获取不了当前滚动的position了；

于是继续找库

1. sticky_headers: ^0.3.0+2

这个库是在item里面区分开头部和内容，外层可以用ListView、GridView、CustomScrollView或 SingleChildScrollView来包裹，一开始觉的这些滚动list，都没法实时获取停靠头部的索引。于是又找第二个库（这里主要是想偷懒，看看有没有现成且完全符合功能的库）

2.easy_sticky_header: ^1.0.5

这个库是可以实时获取头部索引的，这位作者很费心，讲解也很仔细，由于太复杂我没一时也没看懂其原理，然后拿到本地跑起来，发现它没有浮动的头部停靠，而且也不好实现侧边栏效果如下图

image.png

3.side_header_list_view

传送门https://github.com/renefloor/side_header_list_view
这个库实现停靠的方式完全是靠计算来实现，不过有要求必须要指定item高度itemExtend，研究了好一会，想魔改，最后还是放弃了

4.flutter_sticky_header: ^0.6.5

这个库实现了侧壁栏头部停靠，效果还不错，最后发现不能够监听到停靠头部的索引
，而且作者好像也不更新维护了，项目还是4~5年前创建的，最后一次提交是10个月前

折腾了两天，没办法，兜兜转转还是回到第一个sticky_headers，难道没有ListView既能跳转到指定位置，又能实时获取停靠头部的索引吗？哎~，真给我找到了，早知道就不用那么费时间了
这个库就是scrollable_positioned_list: ^0.3.8
再结合sticky_headers: ^0.3.0+2 ，完全可以得到我想要的效果。

监听头部变化代码

// 参考 https://blog.bombox.org/2020-06-30/flutter-chat-listview/

final itemPositionsListener = ItemPositionsListener.create(); // 监听滚动到哪个位置
//ScrollablePositionedList.builder(
     // itemCount: dateEventList.length,
      //itemScrollController: itemScrollController,
      //itemPositionsListener: itemPositionsListener,
     // initialScrollIndex: scrollIndex,
     // itemBuilder: (context, index) {
     // },
 );
// 监听变化
itemPositionsListener.itemPositions.addListener(() {
      int newPosition = getIndex(itemPositionsListener.itemPositions, false);
      if (newPosition != currentPosition) {
          print("当前${currentPosition}");
      }
});

  int getIndex(ValueListenable<Iterable<ItemPosition>> itemPositions,
      bool wholeVisible) {
    var visibleItems = itemPositions.value.where((i) {
      if (wholeVisible) {
        return i.itemLeadingEdge >= 0 && i.itemTrailingEdge <= 1;
      } else {
        return i.itemTrailingEdge > 0 && i.itemLeadingEdge < 1;
      }
    });
    // 取最小index
    ItemPosition firstVisibleItem =
        visibleItems.fold(itemPositions.value.first, (v, i) {
      if (v == null) {
        return i;
      } else if (i.index < v.index) {
        return i;
      } else {
        return v;
      }
    });
    return firstVisibleItem.index;
  }

2024-8-26 自己研究发现监听头部变化代码不用这么麻烦，框架本身就有提供

itemPositionsListener.itemPositions.addListener(() {
      final positions = itemPositionsListener.itemPositions.value;
      // 判断当前可视区域 是否包含今天
      final visibleItemsSet =
      positions.map((itemPosition) => itemPosition.index).toSet();
      var arr = visibleItemsSet.toList();
      arr.sort();
      print('firstChild.index -- ${arr.first}');
      print('displaying -- ${arr.toString()}');
       if (arr.first!= currentPosition) {
          // 头部变更逻辑
        }
    });

5.偶然间看到一个框架scroll-to-index，可以滚动到指定位置，评论中有个需求，就是实时获取当前currentindex，和我们的需求很很像

QQ截图20240823144541.png

根据评论推荐的库就是：scrollview_observer: ^1.21.0，目前188个start，而scrollable_positioned_list是谷歌发布的，目前是1771个start，性能我估计差别不大，关键是scrollview_observer改动小，侵入性较小，还是比较推荐的
库地址传送门：https://pub.dev/packages/scrollview_observer