Android Compose 中如何绘制仅在左右两侧有阴影的 Box？

2024-03-05 16:54:59

Android Compose 中绘制仅在左右两侧有阴影的 Box

在 Android Compose 中，创建带有阴影的元素很容易，但绘制仅在左右两侧有阴影的 Box 却是一个更具挑战性的任务。本篇文章将探讨如何使用自定义画笔和阴影形状来实现这一目标，并提供一个可供复用的代码实现。

自定义阴影画笔

第一步是创建自定义阴影画笔。这可以通过应用模糊掩码滤镜来实现，该滤镜将阴影平滑并创建模糊效果。在下面的代码中，我们创建了两个画笔：leftShadowPaint 用于左侧阴影，rightShadowPaint 用于右侧阴影。

val leftShadowPaint = Paint().apply {
    isAntiAlias = true
    color = shadowColor
    maskFilter = BlurMaskFilter(shadowRadius, BlurMaskFilter.Blur.NORMAL)
}

val rightShadowPaint = Paint().apply {
    isAntiAlias = true
    color = shadowColor
    maskFilter = BlurMaskFilter(shadowRadius, BlurMaskFilter.Blur.NORMAL)
}

定义阴影形状

接下来，我们需要定义阴影的形状。我们将使用一个 RectF 对象来存储阴影矩形。

val shadowRect = RectF()

在 Canvas 上绘制阴影

在 onDraw 方法中，我们使用自定义阴影画笔和阴影形状在 Canvas 上绘制阴影。为了仅在 Box 的左右两侧创建阴影，我们需要应用平移变换以调整画布并绘制阴影。

override fun onDraw(canvas: Canvas) {
    super.onDraw(canvas)

    // 左侧阴影
    shadowRect.set(bounds.left, bounds.top, bounds.centerX(), bounds.bottom)
    canvas.drawRect(shadowRect, leftShadowPaint)

    // 右侧阴影
    shadowRect.set(bounds.centerX(), bounds.top, bounds.right, bounds.bottom)
    canvas.drawRect(shadowRect, rightShadowPaint)
}

应用自定义阴影

最后，我们可以将自定义阴影应用于我们的 Box。通过使用 drawBehind 修饰符，我们可以将阴影绘制在 Box 内容的后面。

Box(
    modifier = Modifier
        .drawBehind {
            onDraw(canvas)
        }
) {
    // 内容
}

完整代码

下面提供了完整代码实现：

import androidx.compose.foundation.Canvas
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.*
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.*
import androidx.compose.ui.graphics.drawscope.DrawScope
import androidx.compose.ui.graphics.drawscope.withTransform
import androidx.compose.ui.unit.dp

@Composable
fun ShadowBox(
    content: @Composable ColumnScope.() -> Unit
) {
    val shadowColor = Color.Gray
    val shadowRadius = 10.dp.toPx()

    val leftShadowPaint = Paint().apply {
        isAntiAlias = true
        color = shadowColor
        maskFilter = BlurMaskFilter(shadowRadius, BlurMaskFilter.Blur.NORMAL)
    }

    val rightShadowPaint = Paint().apply {
        isAntiAlias = true
        color = shadowColor
        maskFilter = BlurMaskFilter(shadowRadius, BlurMaskFilter.Blur.NORMAL)
    }

    val shadowRect = RectF()

    Box(
        modifier = Modifier
            .drawBehind {
                withTransform({
                    translate(top = shadowRadius)
                }) {
                    shadowRect.set(bounds.left, bounds.top, bounds.centerX(), bounds.bottom)
                    drawRect(shadowRect, leftShadowPaint)
                }

                withTransform({
                    translate(top = shadowRadius)
                }) {
                    shadowRect.set(bounds.centerX(), bounds.top, bounds.right, bounds.bottom)
                    drawRect(shadowRect, rightShadowPaint)
                }
            }
    ) {
        Column(content = content)
    }
}