从 Jetpack Compose 列表中删除项目的动画

Question

可组合项接收项目列表作为状态，通过状态提升，用户可以删除其中任何项目以更新父可组合项的可变状态，从而执行子可组合项重组。

例如：我们可以假设这些项目是右侧带有图标的文本。当用户点击图标时，该项目将被删除，并通过状态提升在父可组合项中更新状态。代码可能是这样的：

@Composable
fun parentComposable(){

   var listItems = remember { mutableStateList() )

   childrenComposable(
      listItems,
      onClick = { index ->
         listItems.removeAt(index)
      },
      ...
   )

}

删除某个项目后，在合成完成之前，我想做一个动画（例如淡出），使该项目消失。我已经检查了内置动画 API 来执行此操作，但我认为其中任何一个都符合我的目标。

https://developer.android.com/jetpack/compose/animation/introduction

知道如何实现这一目标吗？我试图在 onClick 删除执行后进行延迟，但似乎效果不佳。

PD：列表中的项目未显示在 LazyColumn/LazyRow 内。它们位于 FlowColumn/FlowRow 内。

Answer 1

您需要做的就是在单击时对每个项目的可见性进行动画处理，这样您就会得到类似这样的内容，然后将其更改为最适合您情况的：

val scope = rememberCoroutineScope()
LazyColumn(modifier = Modifier.fillMaxSize()) {
    items(list) { item ->
        val itemVisibility = remember {
            Animatable(1f)
        }
        Row(
            modifier = Modifier
                .fillMaxWidth()
                .height(30.dp)
                .alpha(itemVisibility.value)
                .clickable {
                    scope.launch {
                        itemVisibility.animateTo(targetValue = 0f, animationSpec = tween(20))
                        list.remove(item)
                    }
                }) {

            Text(text = "item num: $item")
        }
    }
}