如何在带动画的LazyColumn项中调用自定义Composable？

问题原因 #

animateItemPlacement() 是 ExperimentalFoundationApi 下的Lazy列表作用域扩展函数，它的生效依赖于LazyColumn/LazyRow的item/items代码块内部上下文。当你把列表项抽成独立Composable后，该函数的调用上下文脱离了Lazy列表的作用域，因此会出现“Unresolved reference”错误。

解决方案 #

有两种可行的处理方式，推荐第一种更简洁的实现：

方案1：将包含animateItemPlacement的Modifier传入子Composable

在父组件的item作用域内创建带有animateItemPlacement()的Modifier，再传递给子Composable使用：

父组件代码：

@OptIn(ExperimentalFoundationApi::class)
@Composable
fun LazyColumnAnimExample(
    stringList: List<String>,
    modifier: Modifier
) {
    LazyColumn(
        modifier = modifier
            .padding(top = 62.dp)
    ) {
        stringList.forEach { str ->
            item(key = str) {
                // 在Lazy作用域内创建动画Modifier，传入子组件
                ComplicatedItemDraw(
                    text = str,
                    modifier = Modifier.animateItemPlacement()
                )
            }
        }
    }
}

子组件代码：

@Composable
fun ComplicatedItemDraw(
    text: String,
    modifier: Modifier = Modifier // 接收外部传入的Modifier
) {
    Text(
        text = text,
        style = MaterialTheme.typography.headlineLarge,
        modifier = modifier
    )
}

方案2：让子Composable依赖Lazy列表作用域（不推荐）

如果你需要在子组件内部直接调用animateItemPlacement()，可以将子组件定义为LazyListScope的扩展函数，这样就能继承Lazy列表的作用域上下文：

修改后的子组件代码：

@OptIn(ExperimentalFoundationApi::class)
fun LazyListScope.ComplicatedItemDraw(text: String) {
    item(key = text) {
        Text(
            text = text,
            style = MaterialTheme.typography.headlineLarge,
            modifier = Modifier.animateItemPlacement()
        )
    }
}

父组件调用方式：

@OptIn(ExperimentalFoundationApi::class)
@Composable
fun LazyColumnAnimExample(
    stringList: List<String>,
    modifier: Modifier
) {
    LazyColumn(
        modifier = modifier
            .padding(top = 62.dp)
    ) {
        stringList.forEach { str ->
            // 直接调用LazyListScope的扩展函数
            ComplicatedItemDraw(str)
        }
    }
}

注意事项 #

• 两种方案都需要确保代码中添加了@OptIn(ExperimentalFoundationApi::class)注解，因为animateItemPlacement()属于实验性API。
• 方案1更符合组件职责分离的原则：父组件负责列表动画逻辑，子组件专注于UI渲染。

内容的提问来源于stack exchange，提问作者SMBiggs