主页 / coding / 问题 / 79339874
Accepted
Obtice
Asked: 2025-01-08 23:52:48 +0800 CST

在 jetpack compose 中创建带有彩色圆角的透明框

  • 772

我想创建一个具有透明背景和圆角的盒子，例如红色（在 jetpack compose android kotlin 中）。我可以将两个盒子放在一起，下面一个是绿色，上面一个是红色圆角，但问题是，如果我想让顶部透明，我们会看到绿色，但我不想显示绿色，我想要透明的

我想要的正是这样的东西：

在此处输入图片描述

kotlin

1 个回答

  1. Best Answer

    您可以使用 BlendModes 实现这一点。

    首先，在graphicsLayer中将compositionStrategy设置为CompositingStrategy.Offscreen。

    然后在绘制圆角矩形时将 BlendMode 应用于 Rectangle 以获取它们的交点并从中删除 Composable 的内容。

    结果

    在此处输入图片描述

    执行

    @Preview
@Composable
fun TransparentBoxTest() {

    Column(
        modifier = Modifier
            .padding(16.dp)
            .drawChecker()
    ) {
        Box(
            modifier = Modifier
                .fillMaxWidth()
                .aspectRatio(1f)
                .graphicsLayer {
                    compositingStrategy = CompositingStrategy.Offscreen
                }
                .drawWithContent {

                    //Destination
                    drawContent()

                    // Source
                    drawRoundRect(
                        color = Color.Blue,
                        cornerRadius = CornerRadius(64.dp.toPx()),
                    )

                    drawRect(
                        color = Color.Red,
                        blendMode = BlendMode.SrcOut
                    )

                }
        ) {
        }
    }
}

    在父列上绘制棋盘格图案的修饰符

    fun Modifier.drawChecker() = this.then(
    drawBehind {
        val width = this.size.width
        val height = this.size.height

        val checkerWidth = 10.dp.toPx()
        val checkerHeight = 10.dp.toPx()

        val horizontalSteps = (width / checkerWidth).toInt()
        val verticalSteps = (height / checkerHeight).toInt()

        for (y in 0..verticalSteps) {
            for (x in 0..horizontalSteps) {
                val isGrayTile = ((x + y) % 2 == 1)
                drawRect(
                    color = if (isGrayTile) Color.LightGray else Color.White,
                    topLeft = Offset(x * checkerWidth, y * checkerHeight),
                    size = Size(checkerWidth, checkerHeight)
                )
            }
        }
    }
)
    • 1

相关问题