先看我实现的效果图

日历滚动视图.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

image.png

import 'package:flutter/material.dart';
import 'package:scrollview_observer/scrollview_observer.dart';

class ScrollviewObserverPage extends StatefulWidget {
  const ScrollviewObserverPage({super.key});

  @override
  State<ScrollviewObserverPage> createState() => _ScrollviewObserverPageState();
}

class _ScrollviewObserverPageState extends State<ScrollviewObserverPage> {
  ScrollController controller = ScrollController();
  late ListObserverController scrollController;

  @override
  void initState() {
    // TODO: implement initState
    scrollController = ListObserverController(controller: controller);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('既能滚动到指定条目又能监听当前current，可视区区域items'),
      ),
      body: ListViewObserver(
        child: _buildListView(),
        controller: scrollController,
        onObserve: (resultModel) {
          print('firstChild.index -- ${resultModel.firstChild?.index}');
          print('displaying -- ${resultModel.displayingChildIndexList}');
        },
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          scrollController.jumpTo(index: 500);
        },
      ),
    );
  }

  _buildListView() {
    return ListView(
      controller: controller,
      children: [
        ...List.generate(1000, (index) {
          double height= index%2 == 0? 200.0: 100.0;
          return Container(
            margin: EdgeInsets.only(top: 15),
            decoration: BoxDecoration(
                color: (index%2 == 0) ? Colors.red : Colors.green,
                borderRadius: BorderRadius.circular(5)
            ),
            padding: const EdgeInsets.all(8.0),
            child: Column(
              children: [
                Text('ITEM $index'),
              ],
            ),
          );
        })
      ],
    );
  }
}