主页 / coding / 问题 / 78564838
Accepted
Muhammad Ahmed AbuTalib
Asked: 2024-06-02 04:19:39 +0800 CST

在jetpack compose中绘制容器边界外

  • 772

我需要制作一个带有圆角的容器，其中装有一个圆圈，以便一半在容器外部，一半在容器内部。我用下面的代码实现了一个没有圆角的矩形 没有圆角的普通矩形

 Box(modifier = Modifier
    .fillMaxWidth()
    .height(100.dp)
    .padding(top = 20.dp)
    
    .background(ColorScheme.Quaternary.toColor().first)
    ) {
    Box(
        modifier = Modifier
            .layout { measurable, constraints ->
                // Measure the child
                val placeable = measurable.measure(constraints)

                // Set the width and height of the layout as measured
                layout(placeable.width, placeable.height) {
                    // Place the child such that half of it is outside the top boundary
                    placeable.place(0, -25.dp.roundToPx())  // Moves the circle up by 25dp
                }
            }
            .size(50.dp)
            .clip(CircleShape)
            .background(Color.Red)

    )
}

当我尝试将容器弄圆时，红色圆圈也会被剪掉

在此输入图像描述

这是我在修饰符上调用clip的代码（注意我也尝试在修饰符change的不同位置调用clip，但效果是相同的）

Box(modifier = Modifier
    .fillMaxWidth()
    .height(100.dp)
    .padding(top = 20.dp)
    .clip(RoundedCornerShape(10.dp))
    .background(ColorScheme.Quaternary.toColor().first)
    ) {
    Box(
        modifier = Modifier
            .layout { measurable, constraints ->
                // Measure the child
                val placeable = measurable.measure(constraints)

                // Set the width and height of the layout as measured
                layout(placeable.width, placeable.height) {
                    // Place the child such that half of it is outside the top boundary
                    placeable.place(0, -25.dp.roundToPx())  // Moves the circle up by 25dp
                }
            }
            .size(50.dp)
            .clip(CircleShape)
            .background(Color.Red)

    )
}

大家有什么想法吗？

android-jetpack-compose

1 个回答

  1. Best Answer

    在 Jetpack Compose 中，DrawScope 内通过 Modifier.drawWBehind/WithContent/WіthCache 的任何可组合项或绘图都不会被剪裁，除非直接或在后台调用父级Modifier.clip()调用Modifier.graphicsLayer{clip = true}。

    您可以Modifier.clip(RoundedCornerShape(10.dp))从父可组合项中删除并更改背景

    Modifier.background(ColorScheme.Quaternary.toColor().first, RoundedCornerShape(10.dp))

    您还可以 Modifier.drawBehind 在可组合项后面绘制圆角矩形和圆圈，如下所示

    Box(modifier = Modifier
    .fillMaxWidth()
    .height(100.dp)
    .padding(top = 20.dp)
    .drawBehind {
        drawRoundRect(
            color = Color.Gray,
            cornerRadius = CornerRadius(10.dp.toPx(), 10.dp.toPx())
        )
        drawCircle(
            color = Color.Red,
            radius =  25.dp.toPx(),
            center = Offset(25.dp.toPx(), 0f)
        )
    }
)
    • 1

相关问题