Jetpack Compose：仅为Button添加深色涟漪，避免覆盖内部Text

你遇到的问题根源是将RippleAlpha的pressedAlpha设置为1f——完全不透明的涟漪会覆盖在Button内部的Text之上，导致文本被遮挡看起来变灰。以下是两种可行的解决办法：

方案1：降低涟漪的透明度 #

修改rippleAlpha中的pressedAlpha为小于1的半透明值，比如0.3f，这样涟漪效果可见的同时，不会完全遮挡下方的文本：

object RippleCustomTheme : RippleTheme {

    @Composable
    override fun defaultColor() =
        RippleTheme.defaultRippleColor(
            Color(0xFF1F7EFF),
            lightTheme = true
        )

    @Composable
    override fun rippleAlpha(): RippleAlpha =
        RippleAlpha(
            pressedAlpha = 0.3f, // 调整为半透明值
            focusedAlpha = 0f,
            draggedAlpha = 0f,
            hoveredAlpha = 0f
        )
}

方案2：直接给涟漪颜色添加透明度 #

也可以在定义涟漪颜色时直接设置透明度，配合当前的pressedAlpha值，同样能避免遮挡文本：

object RippleCustomTheme : RippleTheme {

    @Composable
    override fun defaultColor() =
        Color(0xFF1F7EFF).copy(alpha = 0.3f) // 给颜色添加透明度

    @Composable
    override fun rippleAlpha(): RippleAlpha =
        RippleAlpha(
            pressedAlpha = 1f,
            focusedAlpha = 0f,
            draggedAlpha = 0f,
            hoveredAlpha = 0f
        )
}

原理说明 #

Compose中Button的涟漪效果是绘制在内容层的上方，完全不透明的涟漪会覆盖所有内部内容，调整透明度后就能让下方的文本正常显示。

内容的提问来源于stack exchange，提问作者Ali Asjad