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实现仅底部阴影？

- oskar lis

Answer 1

复制并粘贴以下扩展并在您的 Card 的 修改器 中使用：

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
    ) {
        [e-mail]()
    }
})

- MR3YY

---

这个对我没用，我正在尝试在选项卡中使用它。 - cblnpa

这对我也没有用，所以我使用了画布。发布答案。 - Rauson Ali

Answer 2

保持简单

modifier.shadow(elevation = 5.dp, spotColor = Color.Transparent)

- alien123X

Answer 3

这会为位于ConstraintLayout中的“content”创建一个顶部阴影

Canvas(modifier = Modifier
       .constrainAs(shadow){
            start.linkTo(content.start)
            end.linkTo(content.end)
            bottom.linkTo(content.top)
            width = Dimension.fillToConstraints
       }
       .height(5.dp),
    onDraw = {
        drawRect(
            brush = Brush.verticalGradient(
            listOf(
                Color.Transparent,
                Color.Black.copy(alpha = 0.1f)
            )
        )
    )
}

- Rauson Ali

Answer 4

我找到了这个（https://slack-chats.kotlinlang.org/t/505928/hello-how-can-i-apply-a-shadow-with-a-bottom-elevation-only-#dba14454-e0b8-4d85-9933-ea9abb93ced7）。

Box(
    modifier = Modifier
        .fillMaxWidth()
        .clip(GenericShape { size, _ ->
            lineTo(size.width, 0f)
            lineTo(size.width, Float.MAX_VALUE)
            lineTo(0f, Float.MAX_VALUE)
        })
        .shadow(16.dp)
        .background(Color.White)
) {
    Text(
        text = "Allow only bottom shadow",
        modifier = Modifier.padding(16.dp)
    )
}

快速尝试这个扩展功能：

fun Modifier.bottomShadow(shadow: Dp) =
    this
        .clip(GenericShape { size, _ ->
            lineTo(size.width, 0f)
            lineTo(size.width, Float.MAX_VALUE)
            lineTo(0f, Float.MAX_VALUE)
        })
        .shadow(shadow)

- MakiX