Compose阴影扩展 - 适用于规则的可组合项

ComposeColorShadow.kt

import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.drawBehind
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.Paint
import androidx.compose.ui.graphics.drawscope.drawIntoCanvas
import androidx.compose.ui.graphics.toArgb
import androidx.compose.ui.unit.Dp
import androidx.compose.ui.unit.dp

fun Modifier.drawColoredShadow(
    color: Color,
    shadowColor: Color,
    alpha: Float = 0.2f,
    borderRadius: Dp = 0.dp,
    shadowRadius: Dp = 20.dp,
    offsetY: Dp = 0.dp,
    offsetX: Dp = 0.dp
) = this.drawBehind {
    val backgroundColor = color.toArgb()
    val transparentColor = color.copy(alpha = 0.0f).toArgb()
    val paintShadowColor = shadowColor.copy(alpha = alpha).toArgb()
    this.drawIntoCanvas {
        val bgPaint = Paint().apply {
            this.asFrameworkPaint().color = backgroundColor
        }
        val paint = Paint().apply {
            asFrameworkPaint().apply {
                this.color = transparentColor
                this.setShadowLayer(
                    shadowRadius.toPx(),
                    offsetX.toPx(),
                    offsetY.toPx(),
                    paintShadowColor
                )
            }
        }
        // 背景色后面的阴影颜色
        it.drawRoundRect(
            0f,
            0f,
            this.size.width,
            this.size.height,
            borderRadius.toPx(),
            borderRadius.toPx(),
            paint
        )
        // 背景色
        it.drawRoundRect(
            0f,
            0f,
            this.size.width,
            this.size.height,
            borderRadius.toPx(),
            borderRadius.toPx(),
            bgPaint
        )
    }
}

Example.kt

import android.os.Bundle
import android.view.View
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.size
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.platform.ComposeView
import androidx.compose.ui.unit.dp
import androidx.compose.ui.viewinterop.AndroidView
import com.example.composeshadowdemo.ui.theme.ComposeShadowDemoTheme

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            ComposeShadowDemoTheme {
                SoftwareLayerComposable {
                    Box(modifier = Modifier.fillMaxSize()) {
                        Box(
                            modifier = Modifier
                                .align(Alignment.Center)
                                .size(100.dp)
                                .drawColoredShadow(color = Color.White, shadowColor = Color.Red, borderRadius = 20.dp)
                        ) {
                            Text(text = "123", modifier = Modifier.align(Alignment.Center))
                        }
                    }
                }
            }
        }
    }
}
@Composable
fun SoftwareLayerComposable(
    modifier: Modifier = Modifier,
    content: @Composable () -> Unit,
) {
    AndroidView(
        factory = { context ->
            ComposeView(context).apply {
                setLayerType(View.LAYER_TYPE_SOFTWARE, null)
            }
        },
        update = { composeView ->
            composeView.setContent(content)
        },
        modifier = modifier,
    )
}