LazyColumn error: LazyPagingItems<TypeVariable(T)> required but found List<T>

Question

I'm using the Paging 3 library with LazyColumn and I want to sort the list according to the category of shopping list items. In the code below, LazyColumn complains that it's expecting LazyPagingItems<TypeVariable(T)> for the items property but found List<ShoppingListItem?>. How can I fix this?

Composable

val lazyListState = rememberLazyListState()
val successItems = allItemsState.allItems?.collectAsLazyPagingItems()

LazyColumn(
    state = lazyListState,
    modifier = Modifier
        .fillMaxWidth(),
    contentPadding = PaddingValues(
        start = 5.dp,
        end = 5.dp,
        top = 8.dp,
        bottom = 165.dp
    ),
    verticalArrangement = Arrangement.spacedBy(5.dp),
) {
    val groupedByCategory = successItems!!.itemSnapshotList.groupBy { it!!.category }

    groupedByCategory.forEach { (initial, shoppingListItems) ->
        item {
            Text(text = initial)
        }
        items(
            items = shoppingListItems, //Throws error at this line
            key = { item ->
                item.id
            }
        ) { item ->
            ShoppingListScreenItem(
                item = item,
                mainViewModel = shoppingListScreenViewModel,
                onNavigateToAddEditItemScreenFromItemStrip = { shoppingListItem ->
                    onNavigateToAddEditItemScreenFromItemStrip(shoppingListItem)
                },
            ) { isChecked ->
                scope.launch {
                    shoppingListScreenViewModel.changeItemChecked(
                        item,
                        isChecked
                    )
                }
            }
            Divider(color = Color.LightGray, thickness = 1.dp)
        }
    }
}

Error message

Type mismatch.

Required:
LazyPagingItems<TypeVariable(T)>
Found:
List<ShoppingListItem?>

Headgear

Answer 1

The appropriate import statement is required in this case.

If the LazyColumn uses a List<T> for the items DSL method, then the following import statement is required:

import androidx.compose.foundation.lazy.items

But, if it uses LazyPagingItems<TypeVariable(T)>, then use the following import statement:

import androidx.paging.compose.items

And both imports can be used at the same time if, for example, you're using a conditional logic to load either of the collection types.

Headgear

Answer 2

The items(LazyPagingItems) function has been removed from newer versions of the library which might be why you were not able to find the import. This was done in order to make the API more flexible and to support all types of LazyContainers.

According to the release notes here: Paging Compose Version 1.0.0-alpha20, here is the approach which should be used:

val lazyPagingItems = pager.collectAsLazyPagingItems()

LazyVerticalGrid(columns = GridCells.Fixed(2)) {
  // Here we use the standard items API
  items(
    count = lazyPagingItems.itemCount,
    // Here we use the new itemKey extension on LazyPagingItems to
    // handle placeholders automatically, ensuring you only need to provide
    // keys for real items
    key = lazyPagingItems.itemKey { it.uniqueId },
    // Similarly, itemContentType lets you set a custom content type for each item
    contentType = lazyPagingItems.itemContentType { "contentType" }
  ) { index ->
    // As the standard items call provides only the index, we get the item
    // directly from our lazyPagingItems
    val item = lazyPagingItems[index]
    PagingItem(item = item)
  }
}

Celsacelsius

Answer 3

Just like what V Mircan said, it was removed. But you can write your own like:

import androidx.compose.foundation.lazy.LazyItemScope
import androidx.compose.foundation.lazy.LazyListScope
import androidx.compose.runtime.Composable
import androidx.paging.compose.LazyPagingItems
import androidx.paging.compose.itemContentType
import androidx.paging.compose.itemKey

fun <T: Any> LazyListScope.items(
    items: LazyPagingItems<T>,
    key: ( (T) -> Any )? = null,
    contentType: ( (T) -> Any )? = null,
    itemContent: @Composable LazyItemScope.(T) -> Unit
) {
    items(
        items.itemCount,
        key = items.itemKey(key),
        contentType = items.itemContentType(contentType)
    ) loop@ { i ->
        val item = items[i] ?: return@loop
        itemContent(item)
    }
}

Then you can use it like other items. Hope that helps.

Recitativo

Answer 4

It works for me Try this:

Hi there please try it once:

listData?.let {
            items(it) { item ->
                ProductElement(
                    drawable = R.drawable.picture,
                    title = item.title,
                    brand = item.brand,
                    prize = "${item.price}"
                )
            }
        }

Kile