flutter如何实现顶部停靠的Listview,可滚动到指定p

2023-11-02  本文已影响0人  Pino

先看我实现的效果图


日历滚动视图.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 ,完全可以得到我想要的效果。

上一篇下一篇

猜你喜欢

热点阅读