https://kotlinlang.org logo
#compose
Title
# compose
a

Alex

11/29/2023, 12:36 PM
I am experimenting with
LookaheadScope
to animate a list order change, I have the following:
Copy code
LookaheadScope {
    items.forEach { item ->
        key(item) {
            Text(
                modifier = Modifier
                    .animatePlacementInScope(this@LookaheadScope, item.name)
                    .defaultStartEndPadding()
                    .clickable { onReorder(items.shuffled()) }
                    .padding(vertical = 8.dp),
                text = item.name,
            )
        }
    }
}
So far so good, when I click any text, the items are shuffled and should reorder in an animated way (the
animatePlacementInScope
is lifted from the compose doc examples here) The issues is, that the items will not reorder on the UI, EXCEPT for the case where one or more items
Text
composables SIZE changes. The size change seems to trigger a recomposition inside of the
key
and will cause the reordering animations (for all items) to run. I cannot figure out how to make the animations run with only changing the ordering of the list, not the size of the
Text
composables. It’s a really weird problem, what am I missing here?
r

Rebecca Franks

11/29/2023, 3:06 PM
Have you tried using animateItemPlacement? I'm not sure I fully understand your use case and the direction of choosing lookahead, but Modifier.animateItemPlacement() should work for reorder animations on lazy items https://developer.android.com/jetpack/compose/lists#item-animations
d

Doris Liu

11/30/2023, 2:32 AM
Looks like the sample code for
animatePlacementInScope
that you copied from missed a
remember
. Try replacing the offsetAnimation in the sample code with:
Copy code
var offsetAnimation: Animatable<IntOffset, AnimationVector2D>? by remember {
        mutableStateOf(
            null
        )
    }
26 Views