ITmob

菜单

ITmob-Ly
发布于 2026-01-10 / 5 阅读
0

在 Jetapck Compose 中修改/去除点击控件时水波纹/涟漪效果的颜色

#Android#Jetpack Compose#Ripple Effect

在 Jetpack Compose 中有时涟漪效果的使用过于频繁，可能会需要修改水波纹/涟漪的颜色，或者去掉涟漪效果。本文将演示如何更改涟漪效果的颜色。

使用 Material3 包中的 Button 等控件时默认的点击事件会有水波纹效果。

如下图 Button 的点击效果默认是一个白色半透明的水波纹效果：

修改涟漪颜色

我们使用 RippleCinfiguration 修改波纹的外观配置，color 参数是波纹颜色，rippleAlpha 参数是波纹不同状态时的透明度。为将这个配置应用到可点击元素上，我们使用 CompositionLocalProvider。当使用此方法提供自定义的涟漪配置时，它将应用于它包含的所有可点击子元素。

下面是自定义波纹外观配置的定义代码和自定义一个包含设置了自定义配置的 CompositionLocalProvider 的可点击控件：

package cn.itmob.widget

@OptIn(ExperimentalMaterial3Api::class)
val CustomRippleCinfiguration = RippleConfiguration(
    color = Color.Red,
    rippleAlpha = RippleAlpha(
        pressedAlpha = 0.12f,
        focusedAlpha = 0.12f,
        draggedAlpha = 0.08f,
        hoveredAlpha = 0.04f
    )
)

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun CustomRippleButton(
    modifier: Modifier = Modifier,
    onClick: () -> Unit,
    text: String,
) {
    CompositionLocalProvider(
        LocalRippleConfiguration provides CustomRippleCinfiguration,
    ) {
        Button(
            modifier = modifier,
            onClick = onClick
        ) {
            Text(text)
        }
    }
}

通过 RippleConfiguration 修改后的涟漪效果：

去除波纹效果

RippleConfiguration 的注释：To disable the ripple, provide null using LocalRippleConfiguration

package cn.itmob.widget

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun CustomRippleButton(
    modifier: Modifier = Modifier,
    onClick: () -> Unit,
    text: String,
) {
    CompositionLocalProvider(
        LocalRippleConfiguration provides null,
    ) {
        Button(
            modifier = modifier,
            colors = ButtonDefaults.buttonColors().copy(containerColor = Color.White, contentColor = Color.Black),
            onClick = onClick
        ) {
            Text(text)
        }
    }
}

问题：

  1. 上面的方法只在 material3:1.3.0+ 和 material:1.7.0+ 库版本可用，因为 RippleConfiguration 是在androidx.compose.material:material:1.7.0 和 androidx.compose.material3:material3:1.3.0 版本增加的新 API。

    如果使用旧版本库可用参考下面的 API 变更，用之前的 API 来实现：

    迁移到 Indication API 和 Ripple API

    已弃用

    替换

    Indication#rememberUpdatedInstance

    IndicationNodeFactory

    rememberRipple()

    改为在 Material 库中提供新的 ripple() API。

    注意：在此上下文中，“Material 库”是指 androidx.compose.material:material、androidx.compose.material3:material3、androidx.wear.compose:compose-material 和 androidx.wear.compose:compose-material3.

    RippleTheme

    请执行以下任一操作：

    • 使用 Material 库 RippleConfiguration API，或

    • 构建您自己的设计系统涟漪实现

  2. RippleConfiguration 的源码注释中提到：

    Configuration for ripple appearance, provided using LocalRippleConfiguration. In most cases the default values should be used, for custom design system use cases you should instead build your own custom ripple using createRippleModifierNode. To disable the ripple, provide null using LocalRippleConfiguration.

    应使用 createRippleModifierNode 构建自己的自定义波纹，有时间再在之后的文章再介绍这种方法吧。

其他：

Jetpack Compose 中 通过 CompositionLocal 提供一个限定在局部的数据作用域

Jetpack Compose 用...