如何用动画将项目插入到 Android 列表中？

Question

我开发了一个简单的 Android 应用程序，您可以通过按按钮将新项目插入列表中。新的物品立马就冒出来了，看起来很马虎。我尝试过为它们的插入设置动画，但不起作用。

我尝试执行此操作的方法是为列表中的每个项目提供一个布尔值来确定该项目是否可见。按下按钮时，布尔值设置为 true。

这是代码

这是每个列表项的数据类。它包含一个布尔值和字符串参数。

data class Item(
    var isVisible: Boolean = false,
    val text: String)

这是用户界面。它由一个列表、一个按钮、一个惰性列组成。该按钮将一个新项目添加到列表中并将 isVisible 参数设置为 true。该列表显示在惰性栏中。

Button(onClick = {
         items.add(Item(
            isVisible = true,
            text = "Item ${items.size + 1}"))
 }) {
        Text("Add item")


    }
        LazyColumn {
             items(items) { item ->
                AnimatedVisibility(visible = item.isVisible) {
                Text(text = item.text)
        }
        }

        }

 

它不起作用。列表项仍然会立即弹出。

Answer 1

Jetpack Compose 最近推出了

animateItem

修改器，它将以动画方式插入、删除和重新排序项目。

您可以按如下方式使用：

@Composable
fun List() {

    val items = remember {
        mutableStateListOf(LocalTime.now().toString())
    }

    LazyColumn {
        item {
            Button(onClick = { items.add(LocalTime.now().toString()) }) {
                Text(text = "INSERT")
            }
        }
        items(
            items = items,
            key = { it } // important to specify keys
        ) {
            Card(
                modifier = Modifier
                    .animateItem()
                    .padding(16.dp)
            ) {
                Text(text = "Item #$it")
            }
        }
    }
}