https://kotlinlang.org logo
Channels
Powered by
#compose
Title
# compose
m

manueldidonna

02/25/2021, 5:30 PM
I encountered a strange bug using 
LazyColumn
and 
CoilImage
without setting a 
Modifier.height
on it. The scroll offset is resetted to 0 every time I scroll up. @cb I tried with 
Image
and 
painterResource
and the bug is absent so I think it depends on Accompanist
I've tried with a custom coil image and the bug still occurs 🤔 @Andrey Kulikov
Copy code
val pictures = List(10) {
    "<https://unsplash.com/photos/Gk2itamk_Lo|https://unsplash.com/photos/Gk2itamk_Lo>"
}
LazyColumn {
    items(pictures) {
        CoilImage(
            data = it,
            modifier = Modifier.fillParentMaxWidth(),
            contentScale = ContentScale.FillWidth
        )
    }
}
a

Andrey Kulikov

02/25/2021, 5:59 PM
So what is probably happening is: as you didn’t set a height while CoilImage is loading the image the height of the component is 0. LazyColumn doesn’t really work when items have no size. Why? because when you scroll we have few pixels to consume during the scroll. and we have to compose more and more items until we fill the requested scroll. if all the elements are 0-sized even for only one frame we will compose all the items in the direction of the scroll in the effort of fill the requested scroll
thus why it is important to provide some placeholders even where the image is not yet loaded
you can for example apply a min height modifier on CoilImage so it is never smaller then 100.dp or something like this
m

manueldidonna

02/25/2021, 6:27 PM
I get it, thanks 🎉 I retrieved the aspect ratio of the pictures and I've used Modifier.aspectRatio and Modifier.fillMaxWidth on the placeholder.
c

cb

02/25/2021, 7:57 PM
You could also provide placeholder content using the 
loading
parameter, rather than fixing the aspect ratio. Both work though 👍
m

manueldidonna

02/25/2021, 8:00 PM
If the loaded image is higher than the placeholder the scroll isn't smooth. No?
c

cb

02/25/2021, 8:00 PM
Very true, you would see a snap with the change of height
We actually mention this in the new lists documentation, but specifically for Paging. Maybe we should make it more general https://developer.android.com/jetpack/compose/lists#large-datasets
👍 1
Powered by