Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

LazyColumn is slower than Column with vertical scroll

I have product cell which I want to display on the list, I've used LazyColumn but performance was terrible, I couldn't find why it is so slow. Then I've switched LazyColumn to Column and all of the sudden scrolling is super smooth

LazyColumn version:

LazyColumn() {
    items(cartItems, key = {it.cartItem.id}) { cartItemData ->
        CartItemWithActions(data = cartItemData)
        Divider(color = colorResource(id = R.color.separator_line))
    }
}
 

Column version

val state = rememberScrollState()
Column(modifier = Modifier.verticalScroll(state)) {
    cartItems.forEach { cartItemData ->
        CartItemWithActions(data = cartItemData)
        Divider(color = colorResource(id = R.color.separator_line))
    }
}

CartItemWithActions is my product cell with image that I'm loading using glide and couple of texts

HWUI for LazyColumn version

HWUI for Column

Can anyone provide hint why LazyColumn is slower than Column?

UPDATE

It seems LazyColumn scroll much better when LazyColumn is setup this way

LazyColumn() {
    items(
        count = cartItems.size,
        key = {
            cartItems[it].cartItem.id
        },
        itemContent = { index ->
            val cartItemData = cartItems[index]
            CartItemWithActions(data = cartItemData)
            Divider(
                color = colorResource(id =R.color.separator_line)
            )
        }
    )
}
like image 491
Maciej Przybylski Avatar asked Nov 05 '21 16:11

Maciej Przybylski


People also ask

How is a LazyColumn different than a regular column?

As the name suggests, the difference between LazyColumn and LazyRow is the orientation in which they lay out their items and scroll. LazyColumn produces a vertically scrolling list, and LazyRow produces a horizontally scrolling list. The Lazy components are different to most layouts in Compose.

How do you make a column scrollable in jetpack compose?

Android Compose – Enable Vertical Scroll for Column To enable Column to allow to scroll vertically when the height of the content inside Column is bigger than the allowed height/constraints, use Modifier. verticalScroll() for the Column modifier parameter.


Video Answer


1 Answers

It seems that initialising LazyColumn in this way solves my issue

LazyColumn() {
    items(
        count = cartItems.size,
        key = {
            cartItems[it].cartItem.id
        },
        itemContent = { index ->
            val cartItemData = cartItems[index]
            CartItemWithActions(data = cartItemData)
            Divider(
                color = colorResource(id =R.color.separator_line)
            )
        }
    )
}

However I still don't know why

like image 107
Maciej Przybylski Avatar answered Oct 03 '22 03:10

Maciej Przybylski