foreword

There is no native RefreshLayout-like layout in the Compose library

So let's implement a RefreshLayout by ourselves

text

RefreshLayout

First look at the effect of RefreshLayout:

The code to use the pull-down refresh function is very simple (pull-down + pull-up, including customization is also very simple):

Take a look at the api:

/**
 * 可以任意方向拖动刷新的容器
 * @param refreshContent 刷新布局内容区域
 * @param refreshLayoutState RefreshLayout的状态,可以调用[rememberRefreshLayoutState]方法创建state并传入一个刷新时触发的回调
 * @param modifier 修饰
 * @param refreshContentThreshold 刷新布局拖动的阈值,拖动超过多少松开才算真的刷新,如果为null,表示为[refreshContent]的宽或高
 * @param composePosition 设置刷新布局所在的位置,并且间接指定了滑动方向
 * @param contentIsMove content组件是否在刷新时跟着移动,true的效果类似于PullToRefresh,false的效果类似于SwipeRefreshLayout
 * @param dragEfficiency 拖动的'有效率',比如默认是手指拖动20px,只能拖出10px
 * @param isSupportCanNotScrollCompose 是否需要支持无法滚动的组件,为true的话内部会套一层可滚动组件
 * @param userEnable 用户是否可以拖动,等于false时用户拖动无反应,但代码可以修改刷新状态
 * @param content compose内容区域
 */
@Composable
fun RefreshLayout()

/**
 * 下拉刷新
 * @param refreshLayoutState RefreshLayout的状态
 * @param modifier 修饰
 * @param refreshContent 刷新布局内容区域
 * @param content compose内容区域
 */
@Composable
fun PullToRefresh()

/**
 * 下拉刷新+上拉加载,如果内部不支持上下滑动的话,则无法使用(可以给modifier加上[verticalScroll]修饰)
 * @param topRefreshLayoutState top的刷新布局的state,可以调用[rememberRefreshLayoutState]方法创建state并传入一个刷新时触发的回调
 * @param bottomRefreshLayoutState bottom的刷新布局的state,可以调用[rememberRefreshLayoutState]方法创建state并传入一个刷新时触发的回调
 * @param modifier 修饰
 * @param topRefreshContent top的刷新布局的content,有默认样式,可以传入lambda自定义
 * @param bottomIsLoadFinish bottom刷新布局是否刷新完成
 * @param bottomRefreshContent bottom的刷新布局的content,有默认样式,可以传入lambda自定义
 * @param content 内容
 */
@Composable
fun VerticalRefreshableLayout()

principle:

The principle is actually the same as RefreshLayout in the Android xml layout, which is to intercept the sliding event and assign whether the event is used first by the parent item or by the child item first. For details, please refer to the nestedScroll Modifier, where the incoming connection attribute is matched with the following annotation. The idea is very clear:

    val connectionState = remember {
        object : NestedScrollConnection {
            //获取Fling动作结束时的速度
            override suspend fun onPostFling(
                consumed: Velocity,//之前消费的所有速度
                available: Velocity//当前剩下还可用的速度
            ): Velocity {
                //返回:当前组件消费的速度,如果不消费,可以返回Velocity.Zero,否则剩下的速度会继续交由当前布局的父布局进行处理
                return super.onPostFling(consumed, available)
            }

            //获取子布局处理后剩下的滑动事件
            override fun onPostScroll(
                consumed: Offset,//被消费的所有滑动事件偏移量
                available: Offset,//当前还剩下可用的滑动事件偏移量
                source: NestedScrollSource//滑动事件的类型
            ): Offset {
                //返回:当前组件消费的滑动事件偏移量,如果不想消费,可以返回Offset.Zero,否则剩下的偏移量会继续交由当前布局的父布局进行处理
                return super.onPostScroll(consumed, available, source)
            }

            //获取Fling动作开始时的速度
            override suspend fun onPreFling(
                available: Velocity//Fling动作开始时的速度
            ): Velocity {
                //返回:当前组件消费的速度,如果不消费,可以返回Velocity.Zero
                return super.onPreFling(available)
            }

            //可以预先拦截滑动事件,消费后再交由子布局
            override fun onPreScroll(
                available: Offset, //当前可用的滑动事件偏移量
                source: NestedScrollSource//滑动事件的类型
            ): Offset {
                //返回:当前组件消费的滑动事件偏移量,如果不消费,可以返回Offset.Zero
                return super.onPreScroll(available, source)
            }
        }
    }

import project

Add to the build.gradle file of the root project:

allprojects {
    repositories {
        maven { url 'https://jitpack.io' }
        ...
    }
}

Add it to the app's build.gradle, the latest version reference: JitPack | Publish JVM and Android libraries

dependencies{
    ...
    implementation 'com.github.ltttttttttttt:ComposeViews:1.1.4'
}

Then you can happily use RefreshLayout

The project is open source, welcome to star: GitHub - ltttttttttttt/ComposeViews

And there are not only FlowLayout in the project, but also more useful Compose components, such as:

ComposePager

Banner

GoodTextField和PasswordTextField

FlowLayout

More Compose components will be added later

end

RefreshLayout in Compose

foreword

text

RefreshLayout

import project

おすすめ