如何更改按钮涟漪效果的颜色

Question

出于某种原因，我无法更改按钮的涟漪效果的颜色。 我在这里做错了什么？

androidx.compose.material.Button(
    onClick = onClick,
    modifier = modifier
        .indication(
            interactionSource = interactionSource,
            indication = rememberRipple(color = Color.Red)
            )
        .navigationBarsPadding(),
    enabled = enabled,
    interactionSource = interactionSource,
    elevation = elevation,
    shape = RectangleShape,
    colors = ButtonDefaults.bottomColors(),
    contentPadding = PaddingValues(vertical = 4.dp),
    content = { Text(text) },
)

- bvk256

Answer 1

你的代码无法工作，因为涟漪效果是在 Button 内定义的 clickable 修饰符中实现的。

但是，你可以通过定义自定义的 RippleTheme 并将其应用于你的组合视图，使用 LocalRippleTheme 来改变涟漪效果的外观。

类似这样：

private object RedRippleTheme: RippleTheme {

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

    @Composable
    override fun rippleAlpha(): RippleAlpha =
        RippleTheme.defaultRippleAlpha(
            Color.Black,
            lightTheme = true
        )
}

并且：

CompositionLocalProvider(LocalRippleTheme provides RedRippleTheme) {
    Button(
       //....
    ){
       //Button content
    }
}

- Gabriele Mariotti

---

RippleTheme.defaultRippleColor(Color.Red, ...) 不是设置涟漪颜色的正确方式。RippleTheme.defaultRippleColor 的第一个参数应该是 contentColor，而不是 rippleColor。我不知道为什么它对你有效，但对我来说唯一有效的方法就是直接使用颜色，例如：override fun defaultColor() = Color.Red。 - undefined

Answer 2

Button 继承自 Surface，并具有自己的指示，可以使用 rememberRipple() 实现。由于 Button 是 Surface，您可以使用任何类似于 Button 的 Composable 实现可点击性。

@Composable
fun Button(
    onClick: () -> Unit,
    modifier: Modifier = Modifier,
    enabled: Boolean = true,
    interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
    elevation: ButtonElevation? = ButtonDefaults.elevation(),
    shape: Shape = MaterialTheme.shapes.small,
    border: BorderStroke? = null,
    colors: ButtonColors = ButtonDefaults.buttonColors(),
    contentPadding: PaddingValues = ButtonDefaults.ContentPadding,
    content: @Composable RowScope.() -> Unit
) {
    val contentColor by colors.contentColor(enabled)
    Surface(
        onClick = onClick,
        modifier = modifier,
        enabled = enabled,
        shape = shape,
        color = colors.backgroundColor(enabled).value,
        contentColor = contentColor.copy(alpha = 1f),
        border = border,
        elevation = elevation?.elevation(enabled, interactionSource)?.value ?: 0.dp,
        interactionSource = interactionSource,
    ) {
        CompositionLocalProvider(LocalContentAlpha provides contentColor.alpha) {
            ProvideTextStyle(
                value = MaterialTheme.typography.button
            ) {
                Row(
                    Modifier
                        .defaultMinSize(
                            minWidth = ButtonDefaults.MinWidth,
                            minHeight = ButtonDefaults.MinHeight
                        )
                        .padding(contentPadding),
                    horizontalArrangement = Arrangement.Center,
                    verticalAlignment = Alignment.CenterVertically,
                    content = content
                )
            }
        }
    }
}

@Composable
fun Surface(
    onClick: () -> Unit,
    modifier: Modifier = Modifier,
    enabled: Boolean = true,
    shape: Shape = RectangleShape,
    color: Color = MaterialTheme.colors.surface,
    contentColor: Color = contentColorFor(color),
    border: BorderStroke? = null,
    elevation: Dp = 0.dp,
    interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
    content: @Composable () -> Unit
) {
    val absoluteElevation = LocalAbsoluteElevation.current + elevation
    CompositionLocalProvider(
        LocalContentColor provides contentColor,
        LocalAbsoluteElevation provides absoluteElevation
    ) {
        Box(
            modifier = modifier
                .minimumTouchTargetSize()
                .surface(
                    shape = shape,
                    backgroundColor = surfaceColorAtElevation(
                        color = color,
                        elevationOverlay = LocalElevationOverlay.current,
                        absoluteElevation = absoluteElevation
                    ),
                    border = border,
                    elevation = elevation
                )
                .clickable(
                    interactionSource = interactionSource,
                    indication = rememberRipple(),
                    enabled = enabled,
                    role = Role.Button,
                    onClick = onClick
                ),
            propagateMinConstraints = true
        ) {
            content()
        }
    }
}

- Thracian