Lottie 文件未加载到 Jetpack Compose 的惰性列中？

Question

我尝试通过导入 json 来在 LazyColumn 中加载 Lottie 动画，但是动画效果 loaded.The 同样我在 Column 中尝试过，效果很好。

Answer 1

LottieAnimation 在内部使用 Modifier.fillMaxSize()，并且此修饰符在可滚动视图中无法正常工作。

来自 Modifier.fillMaxSize() documentation:

If the incoming maximum width or height is Constraints.Infinity this modifier will have no effect in that dimension.

LazyColumn 内部有垂直滚动，这使得高度限制等于 Constraints.Infinity 以允许您根据需要添加任意数量的元素。

您可以通过使用 Modifier.height 设置恒定高度或使用 Modifier.fillParentMaxHeight()

设置与尺寸相关的 LazyColumn 来解决此问题

LazyColumn {
    item {
        LottieAnimation(
            composition = ..., 
            progress = ...,
            modifier = Modifier.fillParentMaxHeight(0.5f)
        )
    }
}

Lottie 文件未加载到 Jetpack Compose 的惰性列中？

Lottie files not loading inside lazy column in jetpack compose?

android-animation

lottie

android-jetpack-compose