Android系统 Compose 列表排序动画代码怎么实现？

下面是一个简单的示例，介绍了如何在列表排序时应用动画效果：

import androidx.compose.animation.core.Animatable
import androidx.compose.animation.core.animateDpAsState
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.*
import androidx.compose.material3.*
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Dp
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp

@Composable
fun SortingList() {
    var items by remember { mutableStateOf(listOf("Banana", "Apple", "Peach", "Orange")) }
    var sorted by remember { mutableStateOf(false) }

    Column {
        Button(onClick = {
            sorted = !sorted
            items = if (sorted) items.sorted() else items.sortedDescending()
        }) {
            Text("Sort")
        }

        LazyColumn {
            items(items) { item ->
                ListItem(item)
            }
        }
    }
}

@Composable
fun ListItem(text: String) {
    var height by remember { mutableStateOf(50.dp) }
    val animatedHeight: Dp by animateDpAsState(targetValue = height)

    Box(
        modifier = Modifier
            .fillMaxWidth()
            .height(animatedHeight)
            .padding(4.dp)
            .clickable {
                height = if (height == 50.dp) 70.dp else 50.dp // 点击时改变高度
            },
        contentAlignment = Alignment.Center
    ) {
        Text(text)
    }
}

在这个示例中，我们创建了一个简单的可点击列表项，当点击列表项时会触发高度动画，并且我们有一个按钮来改变列表的排序。 通过 animateDpAsState，我们可以让高度平滑过渡，达到动画效果。

标签：
来源：