Preciso fazer um container com cantos arredondados, que tenha um círculo encaixado de forma que metade fique fora do container e a outra metade dentro. Consegui um retângulo sem cantos arredondados com o código abaixo
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)
)
}
Quando tento arredondar o contêiner, o círculo vermelho também fica cortado
Este é o código onde chamei clip no modificador (observe que também tentei chamar clip em posições diferentes no modificador change , mas o efeito é o mesmo)
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)
)
}
alguma ideia pessoal?
No Jetpack Compose, nenhum dos Composables ou desenhos dentro do DrawScope via Modifier.drawWBehind/WithContent/WİthCache não são cortados, a menos que o pai chame
Modifier.clip()
,Modifier.graphicsLayer{clip = true}
diretamente ou nos bastidores.Você pode remover
Modifier.clip(RoundedCornerShape(10.dp))
do elemento pai que pode ser composto e alterar o plano de fundo comVocê também pode Modifier.drawBehind para desenhar um retângulo arredondado e um círculo atrás do elemento que pode ser composto como