Android Jetpack Compose自定义涟漪效果致透明背景Dialog重复

问题描述 #

在Compose主题中通过CompositionLocalProvider全局配置LocalRippleConfiguration后，使用透明背景的Dialog出现重复显示的异常：

• 全局配置代码：

CompositionLocalProvider(
    value = LocalRippleConfiguration provides RippleConfiguration(
        rippleAlpha = RippleAlpha(
            pressedAlpha = 0.5f,
            focusedAlpha = 0.4f,
            draggedAlpha = 0.4f,
            hoveredAlpha = 0.4f
        ),
        color = LACE
    )
) {
    MaterialTheme(content = content)
}

• 异常截图：
• 已知关联现象：
  • 给Dialog设置非透明背景时，重复现象消失，但业务需要透明背景
  • 移除全局LocalRippleConfiguration配置后无重复问题，但涟漪效果几乎不可见
  • 修改或删除RippleAlpha参数无法解决问题

问题原因 #

全局设置的RippleConfiguration会影响Dialog内部的底层绘制逻辑，透明背景下，Dialog默认的背景绘制层与涟漪相关的额外绘制层叠加，导致视觉上出现重复显示的效果。

解决方案 #

方案1：为Dialog单独覆盖LocalRippleConfiguration #

在Dialog内部通过局部CompositionLocalProvider覆盖全局配置，避免涟漪设置干扰Dialog的背景绘制：

Dialog(
    onDismissRequest = { /* 关闭逻辑 */ },
    properties = DialogProperties(usePlatformDefaultWidth = false)
) {
    CompositionLocalProvider(
        value = LocalRippleConfiguration provides RippleConfiguration(
            // 可使用默认配置，或自定义适合Dialog的涟漪参数
            rippleAlpha = RippleAlpha.default,
            color = MaterialTheme.colorScheme.primary
        )
    ) {
        // 透明背景的Dialog内容容器
        Box(
            modifier = Modifier
                .background(Color.Transparent)
                .padding(16.dp)
        ) {
            // 你的Dialog内容组件
        }
    }
}

方案2：缩小全局涟漪配置的作用范围 #

不在MaterialTheme外层全局设置涟漪配置，仅在应用主内容区域设置，让Dialog处于配置作用范围之外：

setContent {
    MyTheme {
        // 仅在应用主内容层级设置涟漪配置
        CompositionLocalProvider(
            value = LocalRippleConfiguration provides RippleConfiguration(
                rippleAlpha = RippleAlpha(
                    pressedAlpha = 0.5f,
                    focusedAlpha = 0.4f,
                    draggedAlpha = 0.4f,
                    hoveredAlpha = 0.4f
                ),
                color = LACE
            )
        ) {
            MainScreen() // 应用主界面
        }
    }
}
// Dialog在独立层级显示，不受全局涟漪配置影响

方案3：自定义Dialog背景绘制逻辑 #

通过手动控制Dialog的背景绘制层级，避免与涟漪层冲突：

Dialog(
    onDismissRequest = { /* 关闭逻辑 */ },
    properties = DialogProperties(
        dismissOnBackPress = true,
        dismissOnClickOutside = true,
        usePlatformDefaultWidth = false
    )
) {
    Box(
        modifier = Modifier
            .fillMaxSize()
            .background(Color.Transparent)
            .clickable { /* 点击外部关闭Dialog */ }
    ) {
        // 单独为Dialog内容设置涟漪配置
        CompositionLocalProvider(
            value = LocalRippleConfiguration provides RippleConfiguration(
                rippleAlpha = RippleAlpha(
                    pressedAlpha = 0.5f,
                    focusedAlpha = 0.4f,
                    draggedAlpha = 0.4f,
                    hoveredAlpha = 0.4f
                ),
                color = LACE
            )
        ) {
            Card(
                modifier = Modifier.align(Alignment.Center),
                shape = RoundedCornerShape(16.dp)
            ) {
                // Dialog核心内容
            }
        }
    }
}

验证建议 #

优先尝试方案1，通过局部覆盖快速隔离全局配置对Dialog的影响；若需要保留全局涟漪配置的大范围作用，方案2是更优选择，从根源上避免冲突。

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