如何在 Jetpack Compose LazyColumn 中为滚动上的项目设置动画?

问题描述 投票:0回答:1

我正在尝试在 Jetpack Compose 中实现基于滚动的动画,其中

LazyColumn
中的项目在出现在屏幕上时会以动画方式进入视图。这类似于经典视图系统中的
RecyclerView
中应用动画的方式,其中项目在可见视口中出现时会进行动画处理。

我尝试过使用

AnimatedVisibility
animateItemPlacement
animateItem
LazyColumn
,但这两种方法似乎都无法按预期工作。这是我当前的设置:

LazyColumn(
    modifier = Modifier
        .fillMaxWidth()
        .background(MaterialTheme.colorScheme.primaryContainer)
) {
    items(500) {
        Item(modifier = Modifier.animateItem())
    }
}
@Composable
private fun Item(modifier: Modifier = Modifier) {
    Column(
        modifier
            .fillMaxWidth()
            .padding(horizontal = 10.dp, vertical = 5.dp)
            .background(MaterialTheme.colorScheme.background),
        horizontalAlignment = Alignment.CenterHorizontally,
        verticalArrangement = Arrangement.Center
    ) {
        Text(
            "Jihan Khan",
            style = MaterialTheme.typography.headlineLarge.copy(color = MaterialTheme.colorScheme.onBackground)
        )
        Spacer(Modifier.height(10.dp))
        Text(
            "[email protected]",
            style = MaterialTheme.typography.bodyMedium.copy(color = MaterialTheme.colorScheme.onBackground)
        )
    }
}

我还尝试用

Box
包裹该 Item,并在其上应用
animateItemPlacement
animateItem
modifier,但这也不起作用。我正在寻找有关如何在 Jetpack Compose 中为 LazyColumn 项目实现所需动画效果的指导。任何见解将不胜感激!

android android-jetpack-compose android-jetpack
1个回答
0
投票

animateItemPlacement
animateItem
取代。仅当项目列表更改时(即添加新项目或更改项目顺序)时才会有动画。

如果列表保持不变,并且您只想在项目可见时设置动画,则可以使用

AnimatedVisibility
:

items(500) {
    Box(Modifier.height(100.dp)) {
        var visible by remember { mutableStateOf(false) }
        LaunchedEffect(Unit) { visible = true }

        AnimatedVisibility(visible) {
            Item(/*...*/)
        }
    }
}

注:

  1. AnimatedVisibility
    仅在
    visible
    参数更改时触发。因此它必须以
    false
    开头,并且需要稍后在 LaunchedEffect 中设置为
    true

  2. AnimatedVisibility
    false
    开头时,整个内容将被隐藏,不会占用LazyColumn中的任何空间。因此,LazyColumn 中的所有其他项目也会被加载,因为它们都不会占用空间并且都适合。为了防止将
    AnimatedVisibility
    包裹在一个具有定义高度的盒子中,该盒子充当占位符,即使
    AnimatedVisibility
    不可见。

    我选择了

    100.dp
    ,但您想将其调整为您物品的实际高度。

© www.soinside.com 2019 - 2024. All rights reserved.