Jetpack Compose实现下拉刷新、上拉加载

一、下拉刷新

参考地址：Guide - Accompanist

Box(Modifier.pullRefresh(pullRefreshState)) {
    LazyColumn(Modifier.fillMaxSize()) {
        ...
    }

    PullRefreshIndicator(refreshing, pullRefreshState, Modifier.align(Alignment.TopCenter))
}

 val pullRefreshState = rememberPullRefreshState(articleViewModel.refreshing, {
            coroutineScope.launch {
                articleViewModel.refresh()
            }

        })
        Box(Modifier.pullRefresh(pullRefreshState)){
            LazyColumn(state = lazyListState) {
                if(vm.typeIndex==0){
                    //新闻列表
                    items(articleViewModel.newsLists) {
                            article ->
                        ArticleItem(article,articleViewModel.articleListResLoaded, modifier = Modifier
                            .clickable {
                                onNavigateToArticle()
                            })

                    }
                }else{
                    //视频列表
                    items(videoViewModel.videoLists) { video ->
                        VideoItem(video, modifier = Modifier.clickable {
                            onNavigateToVideo()
                        })

                    }
                }


            }
            PullRefreshIndicator(articleViewModel.refreshing, pullRefreshState, Modifier.align(Alignment.TopCenter))
        }

    //分类数据是否加载成功
    var articleListResLoaded by mutableStateOf(false)
        private set

二、 上拉加载

2.1、封装LazyListStateExtension.kt

@Composable
fun LazyListState.OnBottomReached(buffer:Int =1,loadMore: ()->Unit){

    require(buffer >= 0){
        "buffer 值必须大于等于0"
    }
    //是否应该加载更多的状态
    val shouldLoadMore = remember{
        //由另一个状态计算派生
        derivedStateOf {
            //获取最后显示的item
            val lastVisibleItem =
                layoutInfo.visibleItemsInfo.lastOrNull()?:return@derivedStateOf true
            //如果最后显示的item 是最后一个item的话，说明已经触底，需要加载更多
            lastVisibleItem.index == layoutInfo.totalItemsCount-1-buffer
        }
    }

    LaunchedEffect(shouldLoadMore){
//      参考文档：  https://developer.android.google.cn/jetpack/compose/side-effects?hl=zh-cn#snapshotFlow
//        snapshotFlow：将 Compose 的 State 转换为 Flow
        snapshotFlow { shouldLoadMore.value }
            .collect{
                if (it){
                    loadMore()
                }
            }

    }
}

 2.2、调用

    val coroutineScope = rememberCoroutineScope()

    val lazyListState = rememberLazyListState()
    lazyListState.OnBottomReached(buffer = 1){
        Log.i("===","OnBottomReached")
        coroutineScope.launch {
            articleViewModel.loadMore()
        }

    }

2.3、load数据

    suspend fun loadMore(){
        if (hasMore){
            pageOffset++
            ArticleList()
        }

    }

    //是否还有更多
    private var hasMore = false
    suspend fun ArticleList(){
        var articleListRes = articleService.list(pageOffset,pageSize)
        if(articleListRes.code == 0 && articleListRes.data!=null){
            val tmpList = mutableStateListOf<ArticleEntity>()
            if(pageOffset !=1){
                tmpList.addAll(newsLists)
            }

            tmpList.addAll(articleListRes.data!!)
            //是否还由更多数据
            hasMore = articleListRes.data!!.size <= pageSize
            newsLists = tmpList
            articleListResLoaded = true
            refreshing = false
        }else{
            val message = articleListRes.message
            pageOffset--
            if(pageOffset <=1){
                pageOffset = 1
            }
        }
    }