flutter吸顶滑动方式

Posted 2023-04-13

参考技术A 1.基本思路：customScrollview  ->slivers ->sliverAPbar-->sliver其他组件；

2.轮播图：swiper第三方；

3.路由常用方法：routes，钩子函数：onGenerateRoute    未知路由：unknownGenerateRoute           

CoordinatorLayout实现嵌套滑动吸顶效果

需求：嵌套滑动，顶部Banner能滑出屏幕，banner下方的TabLayout吸附顶部不能滑出屏幕，支持下拉刷新上拉加载更多，效果如下图

实现方案早期有hongyang提供的android-stickynavlayout库

https://codechina.csdn.net/mirrors/hongyangandroid/android-stickynavlayout?utm_source=csdn_github_accelerator

定制UI需求可能需要自行修改部分源码，博主用过之后感觉还是不是很方便相比较于CoordinatorLayout。

CoordinatorLayout+AppBarLayout来实现上面效果，步凑如下

1. app:layout_behavior="@string/appbar_scrolling_view_behavior"
2. app:layout_scrollFlags=“scroll”
3. SmartRefreshLayout
4. fixBug: AppBarLayout translationY

CoordinatorLayout的滚动视图添加behavior="@string/appbar_scrolling_view_behavior"，滚动视图可以是NestedScrollView、RecyclerView等，AppBarLayout的子View Banner 设置layout_scrollFlags属性app:layout_scrollFlags=“scroll” 允许它滚动超出屏幕，刷新加载更多使用第三方开源库SmartRefreshLayout

关于layout_scrollFlags属性详解请自行参考一下链接科普

https://www.jianshu.com/p/4a77ae4cd82f

在正常使用的过程中发现，加载更多时TabLayout向上滑动没有达到吸附顶部的效果，效果如下

造成这个bug原因在于footer显示，解决思路：footer显示高度是多少就把appBarLayout反相位移相应高度值，查阅SmartRefreshLayout源码发现OnMultiListener,修改onFooterMoving函数即可

override fun onFooterMoving(
                footer: RefreshFooter?,
                isDragging: Boolean,
                percent: Float,
                offset: Int,
                footerHeight: Int,
                maxDragHeight: Int
            ) {
                //
                appBarLayout.translationY = offset.toFloat()
            }

今日学习笔记，准备下班！！