如何仅对按钮背景应用波纹效果，而不对内容应用波纹效果？

Question

在 XML 中，波纹效果仅应用于材质按钮的背景，而在 Compose 上，它会覆盖整个按钮，按下按钮时还会部分覆盖文本。

我想匹配在 XML 上实现的波纹实现，这样它就不会在按钮文本上应用视觉效果，而仅在背景上应用视觉效果。

如有任何帮助，我们将不胜感激。

下面是按下撰写按钮时的屏幕截图，当波纹（黄色）覆盖文本时。

这是 XML 版本，其中黄色波纹仅应用于按钮的背景。

Answer 1

目前，使用按钮 AFAIK 是不可能实现这一点的。我会尝试用框+文本替换按钮。像这样的东西：

@Composable
fun RippleButton() {
    Box(
        modifier = Modifier
            ...
            .clickable(
                interactionSource = MutableInteractionSource(),
                indication = rememberRipple(color = Color.DarkGray),
                onClick = { /* your code here */ }),
        contentAlignment = Alignment.Center
    ) {
        Text(...)
    }
}

Answer 2

我也遇到了同样的问题，并发现我必须使用此解决方法，尽管它看起来很糟糕，因为它会渲染相同的文本两次。

@Composable
fun RippleButton() {
    Box(contentAlignment = Alignment.Center) {
        Box(
            modifier = Modifier
                ...
                .clickable( /* ... */ ),
            contentAlignment = Alignment.Center
        ) {
            Text( /* Parameter is the same as the text below */ )
        }
        Text( /* Parameter is the same as the text above */ )
    }
}