美文网首页
flutter如何实现顶部停靠的Listview,可滚动到指定p

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

作者: Pino | 来源:发表于2023-11-02 09:30 被阅读0次

    先看我实现的效果图


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

    相关文章

      网友评论

          本文标题:flutter如何实现顶部停靠的Listview,可滚动到指定p

          本文链接:https://www.haomeiwen.com/subject/ihtnidtx.html