Как избежать утечки фона в виде контура вокруг перелистываемой карты в Jetpack Compose ⇐ Android

[Anonymous]

Я пытаюсь реализовать собственную карточку с возможностью пролистывания для удаления в Jetpack Compose без использования какой-либо библиотеки.
Внутри родительского блока у меня есть два составных элемента, наложенных друг на друга:

• Нижний – красный фон для удаления с использованием matchParentSize()
• Верхний – это перетаскиваемая карта

Оба составных объекта используют одну и ту же форму RoundedCornerShape(8.dp).
Однако я вижу красный контур вокруг карты, как будто красный фон выходит за пределы карты. Я ожидал, что округлые формы полностью перекроются, но красный фон все еще виден.
Чего мне здесь не хватает? Почему фон появляется за пределами карты, хотя обе карты имеют одинаковую форму? Это код, который я использую:

Код: Выделить всё

val maxOffset = with(LocalDensity.current) { 80.dp.toPx() }
var offsetX by remember { mutableStateOf(0f) }
Box{
Box(
Modifier.matchParentSize()
.clip(RoundedCornerShape(8.dp))
.background(Color.Red)
.clickable {
Toast.makeText(context,"Clicked the Button",Toast.LENGTH_SHORT).show()
},
contentAlignment = Alignment.CenterEnd
){
IconButton(onClick = {
}) {
Icon(modifier = Modifier.size(30.dp), imageVector =  Icons.Default.Delete, contentDescription = null, tint = Color.White)
}
}
Card(
modifier = Modifier
.fillMaxWidth()
.offset { IntOffset(offsetX.roundToInt(), 0) }
.draggable(
orientation = Orientation.Horizontal,
state = rememberDraggableState { delta ->
offsetX = (offsetX + delta)
.coerceIn(-maxOffset, 0f)
},
onDragStopped = {
offsetX = if (offsetX < -maxOffset / 2) {
-maxOffset
} else {
0f
}
}
),
colors = CardDefaults.cardColors(
containerColor = MaterialTheme.colorScheme.onTertiary
),
elevation = CardDefaults.cardElevation(
defaultElevation = 3.dp
),
shape = RoundedCornerShape(8.dp),
) {
Row(
modifier = Modifier
.fillMaxWidth()
.padding(horizontal = 5.dp, vertical = 7.dp),
verticalAlignment = Alignment.CenterVertically
){
Image(painter = painter!!,
contentDescription = "",
modifier = Modifier
.size(50.dp)
.clip(RoundedCornerShape(50.dp)),
contentScale = ContentScale.Crop
)
Text(text = username, modifier = Modifier.padding(start = 5.dp))
}
}
}

Вот как это выглядит:





Подробнее здесь: https://stackoverflow.com/questions/798 ... etpack-com