Android Jetpack Compose無限加載列表
前言
Android 中使用 ListView 或者 RecycleView 經常有滾動到底部自動 LoadMore 的需求,那麼在 Compose 中該如何實現呢?
兩種方法可供選擇:
基於 paging-compose
自定義實現
方法一: paging-compose
Jetpack 的 Paging 組件提供瞭對 Compose 的支持
dependencies { ... // Paging Compose implementation "androidx.paging:paging-compose:$latest_version" }
Paging 的無限加載列表需要依靠 Paging 的 DataSource,我們創建一個 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 的數據
@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
轉換成 Compose 的 State ,最終傳遞給 LazyColumn 內的 items
中進行展示。
註意這裡的 items(...)
是 paging-compose 中為 LazyListScope 定義的擴展方法,而非通常使用的 LazyListScope#items
,
public fun <T : Any> LazyListScope.items( items: LazyPagingItems<T>, key: ((item: T) -> Any)? = null, itemContent: @Composable LazyItemScope.(value: T?) -> Unit ) { ... }
它接受的參數類型是 LazyPagingItems<T>
, LazyPagingItems 在 get 時會判斷是否滑動到底部並通過 Paging 請求新的數據,以此實現瞭自動加載。
方法二:自定義實現
如果你不想使用 Paging 的 DataSource,也可以自定義一個無限加載列表的 Composable
@Composable fun list() { val listItems = viewModel.data.observeAsState() LazyColumn { listItems.value.forEach { item -> item { ItemCard(item) } } item { LaunchedEffect(Unit) { viewModel.loadMore() } } } }
當加載到最後一個 item 時,通過 LaunchedEffect 向 viewModel 請求新的數據。
你也可以是用下面的方法,在抵達最後一個 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 的同時獲取當前 index,每次展示 item 時,都判斷一下是否達到 loadMore 條件,比如代碼中是當距離抵達當前列表尾部還有 2 個以內 item 。
註意 LaunchedEffect 可能會隨著每個 item 重組而執行,為 LaunchedEffect 增加參數 listItems.size
是為瞭確保對其在 item 上屏時隻走一次。
添加 LoadingIndicator
如果想在 loadMore 時顯示一個 LoadingIndicator
, 可以實現代碼如下
@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() } } } } }
在展示最後一個 item 時,顯示 LoadingIndicator()
,同時 loadMore()
, 當沒有數據可以加載時,不能再顯示 LoadingIndicator,所以我們必須將 isLast 作為一個狀態記錄到 ViewModel 中,當然,你也可以將 viewModel.data 和 viewModel.isLast 等所有狀態合並為一個 UiState 進行訂閱。
總結
到此這篇關於Android Jetpack Compose無限加載列表的文章就介紹到這瞭,更多相關Android Jetpack Compose內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet!
推薦閱讀:
- Jetpack Compose實現列表和動畫效果詳解
- Android Jetpack Compose實現列表吸頂效果
- Vue的混合繼承詳解
- Docker Compose的安裝和使用步驟
- Jetpack Compose佈局的使用詳細介紹