如何在矩形顶部显示按钮内容？

Question

    Button(
      onClick = { /*TODO*/ },
      colors = ButtonDefaults.buttonColors(
        containerColor = Color(0xFF282828),
        contentColor = Color.White
      ),
      modifier = Modifier
        .height(50.dp)
        .fillMaxWidth()
        .drawWithContent {
          val w = size.width
          val h = size.height
          drawContent()
          clipRect(right = w * progress.value) {
            drawRoundRect(
              color = Color(0xFF634EFB).apply { this.copy(alpha = 0.38F) },
              cornerRadius = CornerRadius(x = 100.dp.toPx(), 100.dp.toPx()),
              size = Size(width = w, height = h),
              topLeft = Offset(0f, 0f),
            )
          }
        }
    ) {
      Text(text = "Hello")
    }

矩形将根据进度值变化。

到目前为止，由于矩形，按钮正在重叠。我试过将 zIndex 赋予文本并更改矩形的 alpha 值，但它不起作用。

Answer 1

看起来

progress.value

是一个已知的动态值，所以你可以用它来设置矩形的宽度。

用这样的东西更新你的

drawWithContent

部分：

.drawWithContent {
    val width = size.width
    val height = size.height

    drawRect(
        color = Color(0xFF634EFB).copy(alpha = 0.38F),
        size = Size(width * progress.value, height)
    )
    drawContent()
}

Answer 2

您可以在blendMode

方法中应用不同的

drawRoundRect：

.drawWithContent {
    val w = size.width
    val h = size.height
    drawContent()
    clipRect(right = w * progress.value) {
        drawRoundRect(
            color = Yellow.apply { this.copy(alpha = 0.38F) },
            cornerRadius = CornerRadius(x = 100.dp.toPx(), 100.dp.toPx()),
            size = Size(width = w, height = h),
            topLeft = Offset(0f, 0f),
            blendMode = BlendMode.Overlay
        )
    }
}