android - 如果不使用 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 中的所有 View 都不会剪切到边界。

contentScale = ContentScale.Crop 仅确定缩放比例。

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