Когда нужен скруглённый угол, закруглённая аватарка или обрезка по кастомной форме — используйте
clip(). Это не просто визуальный эффект: clip обрезает и содержимое, и границы, и все клики внутри.// Скруглённые углы
Box(
modifier = Modifier
.size(100.dp)
.clip(RoundedCornerShape(8.dp))
.background(Color.Blue)
)
// Круглая аватарка
Image(
painter = painterResource(id = R.drawable.avatar),
contentDescription = null,
modifier = Modifier
.size(64.dp)
.clip(CircleShape)
)
Вы можете использовать не только стандартные Shape, но и реализовать свою форму:
// Звёздочка
val starShape = object : Shape {
override fun createOutline(
size: Size,
layoutDirection: LayoutDirection,
density: Density
): Outline {
return Outline.Generic(Path().apply {
// рисуешь путь звёздочки
})
}
}
Box(
modifier = Modifier
.size(100.dp)
.clip(starShape)
.background(Color.Yellow)
)
Если в LazyColumn много элементов с clip — это не критично для производительности, но помни:
👉
clip() работает на GPU (относительно дёшево)👉 Если в clip используется сложная форма (кастомный Path) — может работать медленнее
👉 Для списков с большим количеством элементов профилируй через Compose Layout Inspector
#Compose
Please open Telegram to view this post
VIEW IN TELEGRAM
❤20👍7🤯2
