我正在尝试在 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 项目实现所需动画效果的指导。任何见解将不胜感激!
animateItemPlacement
被 animateItem
取代。仅当项目列表更改时(即添加新项目或更改项目顺序)时才会有动画。
如果列表保持不变,并且您只想在项目可见时设置动画,则可以使用
AnimatedVisibility
:
items(500) {
Box(Modifier.height(100.dp)) {
var visible by remember { mutableStateOf(false) }
LaunchedEffect(Unit) { visible = true }
AnimatedVisibility(visible) {
Item(/*...*/)
}
}
}
注:
AnimatedVisibility
仅在visible
参数更改时触发。因此它必须以 false
开头,并且需要稍后在 LaunchedEffect 中设置为 true
。
当
AnimatedVisibility
以false
开头时,整个内容将被隐藏,不会占用LazyColumn中的任何空间。因此,LazyColumn 中的所有其他项目也会被加载,因为它们都不会占用空间并且都适合。为了防止将 AnimatedVisibility
包裹在一个具有定义高度的盒子中,该盒子充当占位符,即使 AnimatedVisibility
不可见。
我选择了
100.dp
,但您想将其调整为您物品的实际高度。