禁用按钮jetpack compose上的涟漪效果

Question

我已经看到我们可以禁用内部视图的连锁反应，clickable(interactionSource, indication)例如行或列，但我的问题是，我们是否可以从 Button或禁用它FloatingActionButton

我看到它FloatingActionButton有一个交互源属性，我已经尝试过这个

FloatingActionButton(
        modifier = Modifier
            .size(40.dp),
        onClick = {
            buttonState = when (buttonState) {
                ButtonState.PRESSED -> ButtonState.UNPRESSED
                ButtonState.UNPRESSED -> ButtonState.PRESSED
            }
        },
        interactionSource = remember {
            MutableInteractionSource()
        })

这不能消除连锁反应。

然后我尝试使用indication这样的修改器

FloatingActionButton(
        modifier = Modifier
            .size(40.dp)
            .indication(
                interactionSource = remember {
                    MutableInteractionSource()
                },
                indication = null
            ),
        onClick = {
            buttonState = when (buttonState) {
                ButtonState.PRESSED -> ButtonState.UNPRESSED
                ButtonState.UNPRESSED -> ButtonState.PRESSED
            }
        })

也不起作用，然后我尝试的最后一件事是.clickable(...)在 Fab 按钮的修饰符中添加 ，但我认为这是毫无意义的，因为该按钮有自己的 onClick 事件。

上面所有的情况都会产生这样的结果

无论如何，是否有任何按钮可以禁用其连锁反应，而无需在其修饰符中添加Column或Box具有可点击属性？

Answer 1

您可以通过提供RippleTheme来更改ripple o

private class CustomRippleTheme : RippleTheme {
    @Composable
    override fun defaultColor(): Color = Color.Unspecified

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

演示

@Composable
private fun RippleDemo() {
    Column(
        modifier = Modifier
            .fillMaxSize()
            .padding(50.dp)
    ) {

        Button(onClick = { /*TODO*/ }) {
            Text("Button with ripple", fontSize = 20.sp)
        }

        Spacer(Modifier.height(20.dp))

        FloatingActionButton(onClick = { /*TODO*/ }) {
            Icon(imageVector = Icons.Filled.Add, contentDescription = null)
        }
        Spacer(Modifier.height(20.dp))
        CompositionLocalProvider(LocalRippleTheme provides CustomRippleTheme()) {
            Button(onClick = { /*TODO*/ }) {
                Text("Button with No ripple", fontSize = 20.sp)
            }
            Spacer(Modifier.height(20.dp))

            FloatingActionButton(onClick = { /*TODO*/ }) {
                Icon(imageVector = Icons.Filled.Add, contentDescription = null)
            }
        }
    }
}

结果