如果不使用 Card 覆盖，Compose Lottie 组件将无法正常工作

Question

我想在列中有一个 Lottie 文件，但是 Lottie 文件来自其他控件，我可以通过将 Lottie 文件放入卡中来解决问题

看例子

@Composable
fun TileAnimation(modifier: Modifier = Modifier) {
    Card {
        Column {
            Text(
                text = "headline",
                modifier = Modifier
                    .fillMaxWidth()
            )

            val composition by rememberLottieComposition(LottieCompositionSpec.RawRes(R.raw.lottielogo))
//            Card(
//                modifier = Modifier
//                    .height(183.dp)
//                    .then(modifier),
//                shape = RoundedCornerShape(0.dp)
//            ) {
            LottieAnimation(
                composition = composition,
                modifier = modifier
                    .fillMaxWidth()
                    .height(183.dp),
                contentScale = ContentScale.Crop,
            )
//            }
            Box(modifier = Modifier.fillMaxWidth()) {
                Button(
                    onClick = { }, modifier = Modifier
                        .align(Alignment.Center)
                        .wrapContentSize()
                ) {
                    Text(text = "Button")
                }
            }
        }
    }
}

结果如您所见，文字被覆盖了 ->

如果你取消卡片部分的注释，那么它看起来很好 ->

Kotlin 版本 1.6.10 和 compose 1.1.0，这是 lottie 库 ->

implementation "com.airbnb.android:lottie-compose:4.2.2"

顺便说一句，您可以从 here 下载 Lottie 文件 1: https://lottiefiles.com/96036-bored-cat

请问我的解决方案是否正确，或者你们建议另一种方法？

Answer 1

默认情况下，Compose 中的所有视图都不会裁剪到边界。

contentScale = ContentScale.Crop 只决定缩放。

要将内容裁剪到由其他修饰符指定的视图大小，请将 Modifier.clip(RectangleShape) 添加到您的视图。

如果不使用 Card 覆盖，Compose Lottie 组件将无法正常工作

Compose Lottie component doesn't work properly if you don't cover it with Card

android

kotlin

lottie

android-jetpack-compose