将像素转换为 Jetpack Compose 中可定制的圆角指示器点击事件的 dp

Question

我希望在按钮被点击时显示一个自定义提示。该提示应该在角落处呈圆形，并覆盖深色背景。到目前为止，我能够使用以下代码实现这一点：

Modifier.clickable(onClick = {}, indication = PressedIndication)

object PressedIndication : Indication {

    private object DefaultIndicationInstance : IndicationInstance {
        override fun ContentDrawScope.drawIndication(interactionState: InteractionState) {
            drawContent()
            if (interactionState.contains(Interaction.Pressed)) drawRoundRect(
                cornerRadius = CornerRadius(4f, 4f), //<-- How to use dp values?
                color = Color.Black.copy(
                    alpha = 0.3f
                ), size = size
            )

        }
    }

    override fun createInstance(): IndicationInstance {
        return DefaultIndicationInstance
    }
}

我可以使用drawRoundRect和cornerRadius来实现圆角，但是否有使用dp值的方法？

注意：我不能使用clickable和clip，因为可点击区域与指示区域不完全匹配

- Yannick

---

听起来你想做的事情和compose-samples仓库中的猫头鹰示例应用的介绍界面很相似。也许查看源代码可以帮到你。 - Noah

Answer 1

如2jan222所述，您可以使用Dp.toPx()进行转换。

在您的情况下，您可以避免构建自定义的Indication。
您可以使用类似以下的内容：

 val interactionSource = remember { MutableInteractionSource() }
 Modifier.clickable(
        interactionSource = interactionSource,
        indication = rememberRipple(
             radius = 4.dp,
             color=Color.Black.copy(alpha = 0.3f))
        ) 

- Gabriele Mariotti

---

你能否也用这种方法创建方形波纹？ - Yannick

@Yannick 是的，你可以，只需将半径设置为0.dp。 - Skaldebane

这个问题涉及从像素到 dp 的转换，而不是反过来。 - Johann

@Johann 问题是当按钮被点击时，我想显示一个自定义的指示。指示应该是圆角的。答案只是解释了如何实现这个。 - Gabriele Mariotti

标题写着“将像素转换为dp”- 如果这不是意图，请更新标题。 - Johann

Answer 2

可能会迟到

val density : Density = LocalDensity.current
dpValue = with(density){ intValue.toDp() }

- YCuicui

Answer 3

您可以传递Dp，但必须根据屏幕密度进行调整。在密度作用域代码块内使用扩展函数Dp.toPx()即可正常工作。

val sizeInPx = with(LocalDensity.current) { 16.dp.toPx() }

- 2jan222

---

我发现你也可以直接使用dp.toPx() - Yannick

为什么要投票？问题是关于将像素转换为dp而不是相反的情况。 - Johann

该函数在我回答时只接受px作为参数，因此这是正确的答案。请参考此链接：https://dev59.com/V10b5IYBdhLWcg3wC9eJ#42108115，关于密度您可以使用``LocalDensity.current``。 - 2jan222