Jetpack Compose：仅具有底部阴影的组件

Question

我正在努力实现 UI 组件。我想实现这样的目标：

一个只有底部阴影的盒子。

现在我可以添加高度，但它会在每个方向添加阴影。这是我当前的代码及其预览：

@Composable
fun PushNotificationsDisabledInfo(onTap: () -> Unit) {
    Surface(
        elevation = dimensionResource(R.dimen.card_elevation_big),
        shape = RoundedCornerShape(dimensionResource(R.dimen.corner_radius_large)),
        modifier = Modifier
            .background(
                color = colorResource(
                    id = R.color.white
                )
            )
            .padding(dimensionResource(R.dimen.grid_2_5x))
    ) {
        Box(
            Modifier
                .clip(shape = RoundedCornerShape(dimensionResource(R.dimen.corner_radius_large)))
                .background(
                    color = colorResource(R.color.white)
                )
                .clickable(
                    onClick = { onTap() },
                    interactionSource = remember { MutableInteractionSource() },
                    indication = rememberRipple(bounded = true),
                )
        ) {
            Row(Modifier.padding(dimensionResource(R.dimen.grid_2x))) {
                Image(
                    painter = painterResource(R.drawable.ic_error_big),
                    contentDescription = stringResource(R.string.empty_content_description),
                    modifier = Modifier.size(dimensionResource(R.dimen.grid_4x))
                )
                Spacer(modifier = Modifier.width(dimensionResource(R.dimen.grid_2x)))
                Column {
                    Text(
                        text = stringResource(R.string.notifications_settings_push_notifications_disabled_title),
                        style = SiemensTextStyle.caption1,
                        color = colorResource(R.color.red)
                    )
                    Text(
                        text = stringResource(R.string.notifications_settings_push_notifications_disabled_message),
                        style = SiemensTextStyle.caption2,
                        color = colorResource(R.color.black)
                    )
                }
            }
        }
    }
}

有什么想法如何使用 Compose 仅​​实现底部阴影吗？

Answer 1

复制粘贴以下扩展名并在您的卡中使用它Modifier：

private fun Modifier.bottomElevation(): Modifier = this.then(Modifier.drawWithContent {
    val paddingPx = 8.dp.toPx()
    clipRect(
        left = 0f,
        top = 0f,
        right = size.width,
        bottom = size.height + paddingPx
    ) {
        this@drawWithContent.drawContent()
    }
})