如何在 Jetpack Compose 中制作无穷无尽的列表

Question

When make an xml endless list need create RecyclerView and add RecyclerViewOnScrollListener . How to do it in Jetpack Compose?

Answer 1

You can use androidx.ui.foundation.AdapterList for this. It will only composes and lays out the currently visible items.

@Composable
fun CustomerListView(list: List<Customer>) {

    AdapterList(data = list) { customer->

       Text("name:${customer.name}") 
    }
}

Answer 2

You could use LazyColumnFor like explained here :

@Composable
fun LazyColumnForDemo() {
    LazyColumnFor(items = listOf(
            "A", "B", "C", "D"
    ) + ((0..100).map { it.toString() }),
            modifier = Modifier,
            itemContent = { item ->
                Log.d("COMPOSE", "This get rendered $item")
                when (item) {
                    "A" -> {
                        Text(text = item, style = TextStyle(fontSize = 80.sp))
                    }
                    "B" -> {
                        Button(onClick = {}) {
                            Text(text = item, style = TextStyle(fontSize = 80.sp))
                        }
                    }
                    "C" -> {
                        //Do Nothing
                    }
                    "D" -> {
                        Text(text = item)
                    }
                    else -> {
                        Text(text = item, style = TextStyle(fontSize = 80.sp))
                    }
                }
            })
}

Explained by google here: https://youtu.be/SMOhl9RK0BA 23:18

Answer 3

Similar to endless list in RecyclerView with some tunes:

@Parcelize
data class PagingController(
    var loading: Boolean = false,
    var itemsFromEndToLoad: Int = 5,
    var lastLoadedItemsCount: Int = 0,
) : Parcelable {

    fun reset() {
        loading = false
        itemsFromEndToLoad = 5
        lastLoadedItemsCount = 0
    }
}

@Composable
fun LazyGridState.endlessOnScrollListener(
    pagingController: PagingController,
    itemsCount: Int, // provide real collection size to not have collisions if list contains another view types
    loadMore: () -> Unit
) {
    if (!isScrollInProgress) return

    val lastVisiblePosition = layoutInfo.visibleItemsInfo.lastOrNull()?.index ?: 0
    pagingController.run {
        if (loading) {
            if (itemsCount > lastLoadedItemsCount) {
                loading = false
                Timber.v("loaded, lastVisiblePosition: $lastVisiblePosition, itemsCount: $itemsCount")
                lastLoadedItemsCount = itemsCount
            }
        } else {
            if (itemsCount < lastLoadedItemsCount) {
                Timber.v("list reset")
                reset()
            }
            val needToLoad = lastVisiblePosition + itemsFromEndToLoad >= itemsCount
            if (needToLoad) {
                Timber.v("loading, lastVisiblePosition: $lastVisiblePosition, itemsCount: $itemsCount")
                loading = true
                loadMore()
            }
        }
    }
}

 val gridState = rememberLazyGridState()
 LazyVerticalGrid(
     ...
     state = gridState,
 ) { ... 
 }

 val pagingController by rememberSaveable { mutableStateOf(PagingController()) }
 gridState.endlessOnScrollListener(pagingController, dataList.size) {
    ... // loadNextPage
 }