Jetpack Compose 创建带有箭头和边框/高度的聊天气泡

Question

如何创建像 telegram 或 Whatsapp 这样的聊天气泡，其左侧或右侧有海拔和箭头，如图所示？

Answer 1

您可以定义您的自定义Shape。

例如，您可以使用以下方法定义三角形：

class TriangleEdgeShape(val offset: Int) : Shape {

    override fun createOutline(
        size: Size,
        layoutDirection: LayoutDirection,
        density: Density
    ): Outline {
        val trianglePath = Path().apply {
            moveTo(x = 0f, y = size.height-offset)
            lineTo(x = 0f, y = size.height)
            lineTo(x = 0f + offset, y = size.height)
        }
        return Outline.Generic(path = trianglePath)
    }
}

您还可以扩展RoundedCornerShape在右下角添加小三角形。

然后你可以定义类似的东西：

Row(Modifier.height(IntrinsicSize.Max)) {
      Column(
          modifier = Modifier.background(
              color = Color.xxx,
              shape = RoundedCornerShape(4.dp,4.dp,0.dp,4.dp)
          ).width(xxxx)
      ) {
          Text("Chat")
      }
      Column(
          modifier = Modifier.background(
                        color = Color.xxx,
                        shape = TriangleEdgeShape(10))
                     .width(8.dp)
                     .fillMaxHeight()
              ){
      }