Android Jetpack Compose無(wú)限加載列表
前言
Android 中使用 ListView 或者 RecycleView 經(jīng)常有滾動(dòng)到底部自動(dòng) LoadMore 的需求,那么在 Compose 中該如何實(shí)現(xiàn)呢?
兩種方法可供選擇:
基于 paging-compose
自定義實(shí)現(xiàn)
方法一: paging-compose
Jetpack 的 Paging 組件提供了對(duì) Compose 的支持
dependencies { ... // Paging Compose implementation "androidx.paging:paging-compose:$latest_version" }
Paging 的無(wú)限加載列表需要依靠 Paging 的 DataSource,我們創(chuàng)建一個(gè) DataSource ,并在 ViewModel 中加載
class MyDataSource( private val repo: MyRepository ) : PagingSource<Int, MyData>() { override suspend fun load(params: LoadParams<Int>): LoadResult<Int, MyData> { return try { val nextPage = params.key ?: 1 val response = repo.fetchData(nextPage) LoadResult.Page( data = response.results, prevKey = if (nextPage == 1) null else nextPage - 1, nextKey = repo.page.plus(1) ) } catch (e: Exception) { LoadResult.Error(e) } } } class MainViewModel( repo: MyRepository ) : ViewModel() { val pagingData: Flow<PagingData<MyData>> = Pager(PagingConfig(pageSize = 20)) { MyDataSource(repo) }.flow }
接下來(lái)在 Compose 使用 LazyColumn 或者 LazyRow 顯示 Paging 的數(shù)據(jù)
@Composable fun MyList(pagingData: Flow<PagingData<MyData>>) { val listItems: LazyPagingItems<MyData> = pagingData.collectAsLazyPagingItems() LazyColumn { items(listItems) { ItemCard(data = it) } } }
MyList 從 ViewModel 獲取 Flow<PagingData<MyData>>
并通過(guò) collectAsLazyPagingItems
轉(zhuǎn)換成 Compose 的 State ,最終傳遞給 LazyColumn 內(nèi)的 items
中進(jìn)行展示。
注意這里的 items(...)
是 paging-compose 中為 LazyListScope 定義的擴(kuò)展方法,而非通常使用的 LazyListScope#items
,
public fun <T : Any> LazyListScope.items( items: LazyPagingItems<T>, key: ((item: T) -> Any)? = null, itemContent: @Composable LazyItemScope.(value: T?) -> Unit ) { ... }
它接受的參數(shù)類型是 LazyPagingItems<T>
, LazyPagingItems 在 get 時(shí)會(huì)判斷是否滑動(dòng)到底部并通過(guò) Paging 請(qǐng)求新的數(shù)據(jù),以此實(shí)現(xiàn)了自動(dòng)加載。
方法二:自定義實(shí)現(xiàn)
如果你不想使用 Paging 的 DataSource,也可以自定義一個(gè)無(wú)限加載列表的 Composable
@Composable fun list() { val listItems = viewModel.data.observeAsState() LazyColumn { listItems.value.forEach { item -> item { ItemCard(item) } } item { LaunchedEffect(Unit) { viewModel.loadMore() } } } }
當(dāng)加載到最后一個(gè) item 時(shí),通過(guò) LaunchedEffect 向 viewModel 請(qǐng)求新的數(shù)據(jù)。
你也可以是用下面的方法,在抵達(dá)最后一個(gè) item 之前,提前 loadmore,
@Composable fun list() { val listItems = viewModel.data.observeAsState() LazyColumn { itemsIndexed(listItmes) { index, item -> itemCard(item) LaunchedEffect(listItems.size) { if (listItems.size - index < 2) { viewModel.loadMore() } } } } }
如上,使用 itemsIndexed()
可以在展示 item 的同時(shí)獲取當(dāng)前 index,每次展示 item 時(shí),都判斷一下是否達(dá)到 loadMore 條件,比如代碼中是當(dāng)距離抵達(dá)當(dāng)前列表尾部還有 2 個(gè)以內(nèi) item 。
注意 LaunchedEffect 可能會(huì)隨著每個(gè) item 重組而執(zhí)行,為 LaunchedEffect 增加參數(shù) listItems.size
是為了確保對(duì)其在 item 上屏?xí)r只走一次。
添加 LoadingIndicator
如果想在 loadMore 時(shí)顯示一個(gè) LoadingIndicator
, 可以實(shí)現(xiàn)代碼如下
@Composable fun list() { val listItems = viewModel.data.observeAsState() val isLast = viewModel.isLast.observeAsState() LazyColumn { listItems.value.forEach { item -> item { ItemCard(item) } } if (isLast.value.not()) { item { LoadingIndicator() LaunchedEffect(Unit) { viewModel.loadMore() } } } } }
在展示最后一個(gè) item 時(shí),顯示 LoadingIndicator()
,同時(shí) loadMore()
, 當(dāng)沒(méi)有數(shù)據(jù)可以加載時(shí),不能再顯示 LoadingIndicator,所以我們必須將 isLast 作為一個(gè)狀態(tài)記錄到 ViewModel 中,當(dāng)然,你也可以將 viewModel.data 和 viewModel.isLast 等所有狀態(tài)合并為一個(gè) UiState 進(jìn)行訂閱。
總結(jié)
到此這篇關(guān)于Android Jetpack Compose無(wú)限加載列表的文章就介紹到這了,更多相關(guān)Android Jetpack Compose內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
- 融會(huì)貫通Android?Jetpack?Compose中的Snackbar
- Android?Jetpack?Compose開(kāi)發(fā)實(shí)用小技巧
- Android開(kāi)發(fā)Jetpack?Compose元素Modifier特性詳解
- Android JetpackCompose使用教程講解
- Android中分析Jetpack?Compose動(dòng)畫(huà)內(nèi)部的實(shí)現(xiàn)原理
- Android?Jetpack結(jié)構(gòu)運(yùn)用Compose實(shí)現(xiàn)微博長(zhǎng)按點(diǎn)贊彩虹效果
- Android Jetpack Compose實(shí)現(xiàn)列表吸頂效果
- Android使用Jetpack Compose開(kāi)發(fā)零基礎(chǔ)起步教程
相關(guān)文章
基于startActivityForResult方法處理兩個(gè)Activity之間數(shù)據(jù)傳遞問(wèn)題
這篇文章主要介紹了基于startActivityForResult方法處理兩個(gè)Activity之間數(shù)據(jù)傳遞問(wèn)題的相關(guān)資料,需要的朋友可以參考下2015-11-11Android自定義SeekBar實(shí)現(xiàn)滑動(dòng)驗(yàn)證且不可點(diǎn)擊
這篇文章主要為大家詳細(xì)介紹了Android自定義SeekBar實(shí)現(xiàn)滑動(dòng)驗(yàn)證且不可點(diǎn)擊,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-03-03Android 編輯頭像功能簡(jiǎn)單實(shí)現(xiàn)實(shí)例(圖片選取,裁剪)
這篇文章主要介紹了Android 編輯頭像功能簡(jiǎn)單實(shí)現(xiàn)實(shí)例(圖片選取,裁剪),非常具有實(shí)用價(jià)值,需要的朋友可以參考下2017-06-06Android7.0以上Uri轉(zhuǎn)路徑的方法實(shí)現(xiàn)(已驗(yàn)證)
這篇文章主要介紹了Android7.0以上Uri轉(zhuǎn)路徑的方法實(shí)現(xiàn),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-03-03Android如何添加控件監(jiān)聽(tīng)器(三種方式)
本文主要介紹了Android如何添加控件監(jiān)聽(tīng)器(三種方式),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-06-06Android入門(mén)之使用SharedPreference存取信息詳解
這篇文章主要為大家詳細(xì)介紹了Android如何使用SharedPreference實(shí)現(xiàn)存取信息,文中的示例代碼講解詳細(xì),對(duì)我們學(xué)習(xí)Android有一定的幫助,需要的可以參考一下2022-12-12Android 軟鍵盤(pán)出現(xiàn)不適應(yīng)的解決辦法總結(jié)
這篇文章主要介紹了Android 軟鍵盤(pán)出現(xiàn)不適應(yīng)的解決辦法總結(jié)的相關(guān)資料,需要的朋友可以參考下2017-03-03Unity同步/異步調(diào)用Android的方法實(shí)例
unity在Android端開(kāi)發(fā)的時(shí)候,免不了要調(diào)用Java,下面這篇文章主要給大家介紹了關(guān)于Unity同步/異步調(diào)用Android的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2021-08-08