你如何从喷气背包组合中去除按钮涟漪效应？

Question

我的代码如下。

onclick 参数对于按钮来说是必不可少的，但是有没有办法去除开启时的涟漪效应呢？

---

@Composable
fun MyButton() {

    Button(
        shape = RoundedCornerShape(4.dp),
        enabled = isEnabled,
        interactionSource = interactionSource,
        colors = ButtonDefaults.buttonColors(
            disabledBackgroundColor = getButtonDisableColor(style.styleMode),
            backgroundColor = getButtonColor(isPressed, style.styleMode)
        ),
        border = getButtonBorderColor(isEnabled, isPressed, style.styleMode),
        modifier = Modifier
            .fillMaxWidth()
            .height(style.buttonHeight)
            .padding(4.dp),
        onClick = onClick
    ) {
        Text(text = "content", fontSize = 16.dp, style = TextStyle(), color = Color.Red)
    }
}

Answer 1

我解决了，设置内容颜色！

colors = ButtonDefaults.buttonColors(
            disabledBackgroundColor =getButtonDisableColor(style.styleMode),
            backgroundColor = getButtonColor(isPressed, style.styleMode),
            contentColor = !!! 
        )

Answer 2

撰写 1.0.3

Shin Dong Hwi 的解决方案很好，但部分对我有用。 我仍然可以看到按钮周围的阴影

怎么修？ 需要将elevation值设置为零

Button(
    onClick = {},
    colors = ButtonDefaults.buttonColors(
        backgroundColor = Color.Cyan,
        contentColor = Color.Cyan
    ),
    elevation = ButtonDefaults.elevation(
        defaultElevation = 0.dp,
        pressedElevation = 0.dp,
        disabledElevation = 0.dp
    )
) {
    Text(text = "Text", color = Color.Black)
}

Answer 3

在我看来，这里给出的答案只是隐藏了问题。 正如我所看到的，要从按钮上消除涟漪，您需要实现自己的按钮。 如果您查看 Button 可组合的来源，您会看到按钮的一部分是什么涟漪效果，并且您无法将其从外部移除。 （我认为这是材料设计的一部分，可以在您可以单击的元素上显示波纹）

@OptIn(ExperimentalMaterialApi::class)
@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(
        modifier = modifier,
        shape = shape,
        color = colors.backgroundColor(enabled).value,
        contentColor = contentColor.copy(alpha = 1f),
        border = border,
        elevation = elevation?.elevation(enabled, interactionSource)?.value ?: 0.dp,
        onClick = onClick,
        enabled = enabled,
        role = Role.Button,
        interactionSource = interactionSource,
        indication = rememberRipple()
    ) {
        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
                )
            }
        }
    }
}

我们在这里寻找 Surface 参数“指示”，如果您想消除波纹，只需制作自己的按钮并将其设置为“空”。