compose列表更新动画

在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