在laycoloum,layrow,LazyVerticalGrid这些列表组建中,可以通过Modifier.animateItemPlacement()轻松实现数据更新的动画效果
列表更新
代码如下
var list = (0..20).toList().sortedDescending().toMutableStateList()
Column(modifier = Modifier.fillMaxSize()) {
Row {
Button(onClick = {
val first = list.first()
list.add(0, first + 1)
}) {
Text(text = "添加")
}
Button(onClick = {
val random = list.random()
list.remove(random)
}, modifier = Modifier.padding(start = 10.dp)) {
Text(text = "移除")
}
}
LazyColumn(
verticalArrangement = Arrangement.spacedBy(10.dp)
) {
items(list.count(), key = { index: Int -> list[index] }) { index ->
Text(
text = "列表项目${list[index]}",
modifier = Modifier.animateItemPlacement()
)
}
}
}
关键在于需要指定 key = { index: Int -> list[index] } 作为唯一标识,用于跟踪每个列表项目
动画效果如下
device-2023-08-15-170658
类似的,效果也不错
LazyVerticalGrid(
columns = GridCells.Adaptive(100.dp),
contentPadding = PaddingValues(20.dp),
) {}
device-2023-08-15-171417