android - Jetpack Compose 内阴影

Question

如何使用 Jetpack Compose 创建内部阴影？渐变应该从外面的黑色到里面的透明。 Modifier.shadow()仅适用于外部阴影。使用负海拔是行不通的。

Answer 1

fun Modifier.innerShadow(
    color: Color = Color.Black,
    cornersRadius: Dp = 0.dp,
    spread: Dp = 0.dp,
    blur: Dp = 0.dp,
    offsetY: Dp = 0.dp,
    offsetX: Dp = 0.dp
) = drawWithContent {

    drawContent()

    val rect = Rect(Offset.Zero, size)
    val paint = Paint()

    drawIntoCanvas {

        paint.color = color
        paint.isAntiAlias = true
        it.saveLayer(rect, paint)
        it.drawRoundRect(
            left = rect.left,
            top = rect.top,
            right = rect.right,
            bottom = rect.bottom,
            cornersRadius.toPx(),
            cornersRadius.toPx(),
            paint
         )
         val frameworkPaint = paint.asFrameworkPaint()
         frameworkPaint.xfermode = PorterDuffXfermode(PorterDuff.Mode.DST_OUT)
         if (blur.toPx() > 0) {
             frameworkPaint.maskFilter = BlurMaskFilter(blur.toPx(), BlurMaskFilter.Blur.NORMAL)
         }
         val left = if (offsetX > 0.dp) {
             rect.left + offsetX.toPx()
         } else {
             rect.left
         }
         val top = if (offsetY > 0.dp) {
             rect.top + offsetY.toPx()
         } else {
             rect.top
         }
         val right = if (offsetX < 0.dp) {
             rect.right + offsetX.toPx()
         } else {
             rect.right
         }
         val bottom = if (offsetY < 0.dp) {
             rect.bottom + offsetY.toPx()
         } else {
             rect.bottom
         }
         paint.color = Color.Black
         it.drawRoundRect(
             left = left + spread.toPx() / 2,
             top = top + spread.toPx() / 2,
             right = right - spread.toPx() / 2,
             bottom = bottom - spread.toPx() / 2,
             cornersRadius.toPx(),
             cornersRadius.toPx(),
             paint
         )
         frameworkPaint.xfermode = null
         frameworkPaint.maskFilter = null
    }
}

用法:

Box(
    modifier = Modifier
        .width(240.dp)
        .height(180.dp)
        .outerShadow(
            color = Color(0xff000000),
            alpha = 0.5f,
            cornersRadius = 20.dp,
            shadowBlurRadius = 30.dp,
            offsetX = 0.dp,
            offsetY = 15.dp
        )
        .clip(RoundedCornerShape(20.dp))
        .background(Color(0xFF282A2F))
        .innerShadow(
            blur = 1.dp,
            color = Color(0xff00FFFF),
            cornersRadius = 20.dp,
            offsetX = (-40.5).dp,
            offsetY = (-10.5).dp
        )
        .innerShadow(
            blur = 20.dp,
            color = Color(0xffff0000),
            cornersRadius = 20.dp,
            offsetX = 0.5.dp,
            offsetY = 0.5.dp
        )
        .padding(14.dp),
    contentAlignment = Alignment.Center
) {
    Text(
        text = stringResource(id = R.string.notification_service),
        modifier = Modifier,
        color = Color.White
     )
}

我希望它有所帮助。 outerShadow也是自定义修饰符，从其他网站复制的。