Shulou(Shulou.com)06/02 Report--

This article will introduce in detail for you "Android Jetpack Compose infinite load list example analysis", the content steps are clear and detailed, the details are handled properly, and the editor will update different knowledge points every day, hope that this "Android Jetpack Compose infinite load list example analysis" can give you unexpected gains, please follow the editor's ideas slowly in depth, the specific content is as follows, to harvest new knowledge.

Preface

Using ListView or RecycleView in Android often requires scrolling to the bottom of the automatic LoadMore, so how to implement it in Compose?

There are two ways to choose:

Based on paging-compose

Custom implementation

Method 1: paging-compose

The Paging component of Jetpack provides support for Compose

Dependencies {. / / Paging Compose implementation "androidx.paging:paging-compose:$latest_version"}

Paging's infinite load list depends on Paging's DataSource. We create a DataSource and load it in ViewModel

Class MyDataSource (privateval repo: MyRepository): PagingSource () {override suspend fun load (params: LoadParams): LoadResult {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 = Pager (PagingConfig (pageSize = 20)) {MyDataSource (repo)} .flow}

Next, use LazyColumn or LazyRow to display Paging data in Compose

@ Composablefun MyList (pagingData: Flow) {val listItems: LazyPagingItems = pagingData.collectAsLazyPagingItems () LazyColumn {items (listItems) {ItemCard (data = it)}

MyList acquires Flow from ViewModel and converts it to State of Compose through collectAsLazyPagingItems, and finally passes it to items in LazyColumn for display.

Notice the items (...) here. Is an extension method defined for LazyListScope in paging-compose, rather than the commonly used LazyListScope#items

Public fun LazyListScope.items (items: LazyPagingItems, key: ((item: t)-> Any)? = null, itemContent: @ Composable LazyItemScope. (value: t?)-> Unit) {.}

It accepts a parameter type of LazyPagingItems, and LazyPagingItems determines whether to slide to the bottom during get and requests new data through Paging, thus realizing automatic loading.

Method 2: custom implementation

If you don't want to use Paging's DataSource, you can customize a Composable that loads the list indefinitely.

@ Composablefun list () {val listItems = viewModel.data.observeAsState () LazyColumn {listItems.value.forEach {item-> item {ItemCard (item)}} item {LaunchedEffect (Unit) {viewModel.loadMore ()}

When the last item is loaded, the new data is requested from the viewModel through LaunchedEffect.

You can also use the following method to loadmore in advance before reaching the last item

@ Composablefun 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， 可以实现代码如下 @Composablefun 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 ()} }

When showing the last item, show LoadingIndicator (), and loadMore (), when there is no data to load, you can no longer display LoadingIndicator, so we have to record isLast as a state in ViewModel, of course, you can also merge all states such as viewModel.data and viewModel.isLast into one UiState to subscribe.

What is Android? Android is a free and open source operating system based on the Linux kernel, mainly used in mobile devices, such as smartphones and tablets, led and developed by Google and the Open Mobile Alliance.

If you can read this, the editor hopes that you will have the most profound understanding of the key issue of "sample Analysis of Android Jetpack Compose Infinite load list" from the practical level, and you still need to practice and use it yourself to understand it. If you want to read more related articles, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.