您好,登錄后才能下訂單哦!
本文將為大家詳細(xì)介紹“Android Jetpack Compose無限加載列表的示例分析”,內(nèi)容步驟清晰詳細(xì),細(xì)節(jié)處理妥當(dāng),而小編每天都會(huì)更新不同的知識(shí)點(diǎn),希望這篇“Android Jetpack Compose無限加載列表的示例分析”能夠給你意想不到的收獲,請(qǐng)大家跟著小編的思路慢慢深入,具體內(nèi)容如下,一起去收獲新知識(shí)吧。
Android 中使用 ListView 或者 RecycleView 經(jīng)常有滾動(dòng)到底部自動(dòng) LoadMore 的需求,那么在 Compose 中該如何實(shí)現(xiàn)呢?
兩種方法可供選擇:
基于 paging-compose
自定義實(shí)現(xiàn)
Jetpack 的 Paging 組件提供了對(duì) Compose 的支持
dependencies { ... // Paging Compose implementation "androidx.paging:paging-compose:$latest_version" }
Paging 的無限加載列表需要依靠 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 }
接下來在 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>>
并通過 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)到底部并通過 Paging 請(qǐng)求新的數(shù)據(jù),以此實(shí)現(xiàn)了自動(dòng)加載。
如果你不想使用 Paging 的 DataSource,也可以自定義一個(gè)無限加載列表的 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í),通過 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只走一次。
如果想在 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)沒有數(shù)據(jù)可以加載時(shí),不能再顯示 LoadingIndicator,所以我們必須將 isLast 作為一個(gè)狀態(tài)記錄到 ViewModel 中,當(dāng)然,你也可以將 viewModel.data 和 viewModel.isLast 等所有狀態(tài)合并為一個(gè) UiState 進(jìn)行訂閱。
Android是一種基于Linux內(nèi)核的自由及開放源代碼的操作系統(tǒng),主要使用于移動(dòng)設(shè)備,如智能手機(jī)和平板電腦,由美國Google公司和開放手機(jī)聯(lián)盟領(lǐng)導(dǎo)及開發(fā)。
如果你能讀到這里,小編希望你對(duì)“Android Jetpack Compose無限加載列表的示例分析”這一關(guān)鍵問題有了從實(shí)踐層面最深刻的體會(huì),具體使用情況還需要大家自己動(dòng)手實(shí)踐使用過才能領(lǐng)會(huì),如果想閱讀更多相關(guān)內(nèi)容的文章,歡迎關(guān)注億速云行業(yè)資訊頻道!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請(qǐng)聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。