How Can I Call Another Composable within an Item in a Lazy Column with Animation?

Question

I'm still learning compose/kotlin and have come up with a problem that seems very common, but I can't find a solution.

I have a LazyColumn with animation--that works great for making additions and subtractions from the LazyColumn visible and attractive. But I want to have a very complicated items. They are very unwieldy, so I naturally want to have them in their own function.

But when I move the item content to a separate composable function, the inner function doesn't know how to deal with animateItemPlacement().

Here is my (simplified) code for the composable function with the LazyColumn

@OptIn(ExperimentalFoundationApi::class)
@Composable
fun LazyColumnAnimExample(
    stringList: List<String>,
    modifier: Modifier
) {
    LazyColumn(
        modifier = modifier
            .padding(top = 62.dp)
    ) {
        stringList.forEach { str ->
            item(key = str) {
                ComplicatedItemDraw(str)
            }
        }
    }
}

And here is the function (greatly simplified) that draws each item

@Composable
fun ComplicatedItemDraw(text: String) {
    Text(
        text = text,
        style = MaterialTheme.typography.headlineLarge,
        modifier = Modifier
            .animateItemPlacement()  // error
    )
}

The error message is "Unresolved reference: animateItemPlacement"

There has to be a way around this--probably something simple.

Jan Bína · Accepted Answer · 2025-01-28 22:16:09Z

4

animateItemPlacement is a function defined in LazyItemScope interface, so for you to be able to use it in your function, it has to be an extension function of that interface:

@Composable
fun LazyItemScope.ComplicatedItemDraw(text: String) {
    Text(text, modifier = Modifier.animateItemPlacement())
}

This however means that you won't be able to use ComplicatedItemDraw outside of LazyList. Probably a better solution and a best practice, is to define Modifier parameter on your composable and pass animateItemPlacement() from your item {} like this:

@Composable
fun Example() {
    LazyColumn {
        item {
            ComplicatedItemDraw("", Modifier.animateItemPlacement())
        }
    }
}

@Composable
fun ComplicatedItemDraw(text: String, modifier: Modifier = Modifier) {
    Text(text, modifier = modifier)
}

answered Jan 28 at 22:16

Jan Bína

7,8911 gold badge24 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

SMBiggs Jan 29 at 1:12

Haha! Both work! Thank you for suggesting two ways for two different situations. Too bad I can't give you two checks.

lisonge Feb 1 at 11:42

animateItemPlacement is Deprecated, you should use animateItem or gist.github.com/lisonge/b966cbb10728e7cdc60cf3ad971b4b81

Collectives™ on Stack Overflow

How Can I Call Another Composable within an Item in a Lazy Column with Animation?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related