迁移至Indication和Ripple API后LargeFloatingActionButton二次点击崩溃

问题根源 #

崩溃是由于通过CompositionLocalProvider将LocalRippleConfiguration设为null，Material3的LargeFloatingActionButton内部涟漪节点管理逻辑在配置动态切换时，出现委托节点找不到的异常。

修复方案 #

直接利用Material3按钮内置的enabled参数处理状态，无需手动修改LocalRippleConfiguration。按钮本身会根据enabled状态自动禁用涟漪、拦截点击事件并调整视觉样式。

修改后的代码：

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun LargeFloatingActionButtonCustom(
    icon: ImageVector,
    contentDescription: String,
    onClick: () -> Unit,
    enabled: Boolean = true
) {
    LargeFloatingActionButton(
        modifier = Modifier.size(52.dp),
        shape = CircleShape,
        containerColor = if (enabled) MaterialTheme.colorScheme.primaryContainer else MaterialTheme.colorScheme.surfaceDim,
        onClick = onClick,
        enabled = enabled // 直接传递enabled参数，交由按钮内部处理交互与涟漪
    ) {
        Icon(
            imageVector = icon,
            contentDescription = contentDescription,
            tint = if (enabled) LocalContentColor.current else DarkGray
        )
    }
}

原理说明 #

Material3的LargeFloatingActionButton的enabled参数会自动处理：

• 禁用状态下拦截点击事件，无需手动在onClick中判断
• 自动隐藏涟漪效果，无需修改LocalRippleConfiguration
• 可配合自定义颜色调整视觉状态（如你代码中的containerColor和Icon tint）

若因特殊需求必须自定义涟漪配置，请勿将LocalRippleConfiguration设为null，而是提供一个完全透明、无透明度变化的涟漪配置：

val disabledRipple = RippleConfiguration(
    rippleAlpha = RippleAlpha(0f, 0f, 0f, 0f),
    rippleColor = Color.Transparent
)

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun LargeFloatingActionButtonCustom(
    icon: ImageVector,
    contentDescription: String,
    onClick: () -> Unit,
    enabled: Boolean = true
) {
    CompositionLocalProvider(
        LocalRippleConfiguration provides if (enabled) LocalRippleConfiguration.current else disabledRipple
    ) {
        LargeFloatingActionButton(
            modifier = Modifier.size(52.dp),
            shape = CircleShape,
            containerColor = if (enabled) MaterialTheme.colorScheme.primaryContainer else MaterialTheme.colorScheme.surfaceDim,
            onClick = onClick,
            enabled = enabled
        ) {
            Icon(
                imageVector = icon,
                contentDescription = contentDescription,
                tint = if (enabled) LocalContentColor.current else DarkGray
            )
        }
    }
}

内容的提问来源于stack exchange，提问作者h4rdrew