Compose Broadcast: “⚙️ Modifier.clip() — изменение формы Composable Когда нужен скруглённы…”

⚙️ Modifier.clip() — изменение формы Composable

Когда нужен скруглённый угол, закруглённая аватарка или обрезка по кастомной форме — используйте 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