欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Android Jetpack Compose無(wú)限加載列表

 更新時(shí)間:2022年01月17日 11:09:01   作者:fundroid_方卓  
大家好,本篇文章主要講的是Android Jetpack Compose無(wú)限加載列表,感興趣的同學(xué)趕快來(lái)看一看吧,對(duì)你有幫助的話記得收藏一下

前言

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)行訂閱。

請(qǐng)?zhí)砑訄D片描述

總結(jié)

到此這篇關(guān)于Android Jetpack Compose無(wú)限加載列表的文章就介紹到這了,更多相關(guān)Android Jetpack Compose內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

最新評(píng)論