前言：ComposeUI是將來開發的趨勢，本人也在對它進行學習，會把踩過的坑一一記錄下來，希望能對大家有幫助。話不多說，直接開干。

目錄

下拉刷新

1、引入依賴庫

2、使用方法

上拉加載?

1、先看用法（結合下拉刷新）：

2、具體實現

---

下拉刷新

下拉刷新有封裝好的控件SwipeRefresh我們直接拿來用：

1、引入依賴庫

repositories {mavenCentral() }dependencies {implementation "com.google.accompanist:accompanist-swiperefresh:<version>" }

注意：要根據自己項目中composeUI 的版本引入正確的版本號

2、使用方法

ViewModel:var isRefreshing by mutableStateOf(false)//用來控制SwipeRefresh的刷新狀態private setUI: SwipeRefresh(state = rememberSwipeRefreshState(isRefreshing = vm.isRefreshing),//用來控制SwipeRefresh的刷新狀態onRefresh = {//刷新回調vm.loadTopArticle()vm.loadArticle(true)}) {LazyColum() {item {SwiperContent(dataSource = vm.swiperData)}items(vm.articleTopDataSource) { temp ->ArticleItem(item = temp, true)}}}

這個控件使用起來還是比較簡單的，可以參考官網：Guide - Accompanist

---

上拉加載?

上拉加載我沒有找到成熟的三方庫，不過通過看網上各種大神的帖子，自己整理了一套，使用邏輯和下拉刷新基本一致。具體如下

1、先看用法（結合下拉刷新）：

viewModel:var loadMoreState by mutableStateOf(LoadMoreState.hasMore) //用來對loadmore狀態控制private setUI:SwipeRefresh(state = rememberSwipeRefreshState(isRefreshing = vm.isRefreshing),//用來控制SwipeRefresh的刷新狀態onRefresh = {//*刷新回調vm.loadTopArticle()vm.loadArticle(true)}) {LazyLoadMoreColum(loadMoreCallBack = {//*在加載更多的回調中去進行數據加載vm.loadArticle(false)}, loadMoreState = vm.loadMoreState //*用來控制上拉加載狀態) {//以下內容跟LazyColum用法一樣item {SwiperContent(dataSource = vm.swiperData)}items(vm.articleTopDataSource) { temp ->ArticleItem(item = temp, true)}items(vm.articleDataSource) { temp ->ArticleItem(item = temp, false)}}}

怎么樣樣式還算簡潔吧。

2、具體實現

1、要實現加載更多肯定要判斷LazyColum是否滾動到底部。LazyColum參數中有個LazyListState的實體，LazyListState的類中有一個layoutInfo參數，通過參數說明可以發現，通過它可以達到我們的目的。

/*** The object of [LazyListLayoutInfo] calculated during the last layout pass. For example,* you can use it to calculate what items are currently visible.*/val layoutInfo: LazyListLayoutInfo get() = layoutInfoState.value

對LazyListState進行擴展，代碼如下（具體看注釋）：LazyListStateExt.kt

import androidx.compose.foundation.lazy.LazyListState import androidx.compose.runtime.*/*** 擴展LazyColum的LazyListState，通過計算判斷是否到達最后一項* @receiver LazyListState* @param buffer Int 指定離底部還剩幾個時進行加載更多回調* @param loadMore Function0<Unit>*/ @Composable fun LazyListState.OnBottomReached(buffer: Int = 0, loadMore: () -> Unit) {require(buffer >= 0) {"buffer 值必須是正整數"}//是否應該加載更多的狀態val shouldLoadMore = remember {//因為狀態由layoutInfo計算得到derivedStateOf {//列表為空的話直接返回trueval lastVisibleItem =layoutInfo.visibleItemsInfo.lastOrNull() ?: return@derivedStateOf true//如果現實項為最后一個item 返回truelastVisibleItem.index == layoutInfo.totalItemsCount - 1 - buffer}}LaunchedEffect(key1 = shouldLoadMore, block = {snapshotFlow {shouldLoadMore.value}.collect {if (it) {loadMore()}}}) }

2、對loadMore狀態進行分析：

? ? LoadMore有三種狀態：可加載更多、已加載全部、加載更多出錯。

enum class LoadMoreState {hasMore, //可加載更多內容noMore, //已加載完全部內容loadError //加載出錯 }

3、封裝LazyColum，對其根據加載狀態追加加載狀態提示。具體代碼如下：LazyLoadMoreColum.kt

import androidx.compose.foundation.clickable import androidx.compose.foundation.layout.Box import androidx.compose.foundation.layout.fillMaxWidth import androidx.compose.foundation.layout.padding import androidx.compose.foundation.lazy.LazyColumn import androidx.compose.foundation.lazy.LazyListScope import androidx.compose.foundation.lazy.LazyListState import androidx.compose.foundation.lazy.rememberLazyListState import androidx.compose.material.Text import androidx.compose.runtime.Composable import androidx.compose.runtime.rememberUpdatedState import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier import androidx.compose.ui.graphics.Color import androidx.compose.ui.tooling.preview.Preview import androidx.compose.ui.unit.dp import androidx.compose.ui.unit.sp import com.lifeidroid.wanandroid.ext.OnBottomReached/*** 為LazyColum增加加載更多提示* @param modifier Modifier* @param loadMoreState LoadMoreState* @param loadMore Function0<Unit>* @param content [@kotlin.ExtensionFunctionType] Function1<LazyListScope, Unit>*/ @Composable fun LazyLoadMoreColum(modifier: Modifier = Modifier,loadMoreState: LoadMoreState = LoadMoreState.hasMore,loadMoreCallBack: () -> Unit,content: LazyListScope.() -> Unit ) {val lazyListState = rememberLazyListState()lazyListState.OnBottomReached {if (loadMoreState == LoadMoreState.hasMore) {loadMoreCallBack()}}LazyColumn(modifier, state = lazyListState) {content()//LoadMore的提示內容,可以根據自己的需求去自定義該部分顯示樣式item {Box(modifier = Modifier.clickable {if (loadMoreState == LoadMoreState.loadError) {loadMoreCallBack()}}.fillMaxWidth().padding(vertical = 8.dp),contentAlignment = Alignment.Center,) {Text(text = when (loadMoreState) {LoadMoreState.hasMore -> "正在加載.."LoadMoreState.noMore -> "沒有更多數據了.."LoadMoreState.loadError -> "網絡出錯，點擊重試！"},fontSize = 14.sp,color = Color.Gray)}}} }

代碼很簡單，大家可以根據源碼進行閱讀理解，我就啰嗦了。希望對大家有幫助。

總結

以上是生活随笔為你收集整理的ComposeUI——下拉刷新+上拉加载(一、简单封装)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。