如何在Jetpack Compose中禁用或调整DropdownMenu与DropdownMenuItem的波纹效果

一、禁用DropdownMenuItem的波纹效果 #

DropdownMenuItem内部默认自带点击波纹，直接添加Modifier.clickable(indication = null)不会生效——因为组件自身的点击逻辑优先级更高。可以用以下两种方式处理：

方法1：用pointerInput替代默认点击逻辑 #

跳过组件自带的点击交互，直接通过pointerInput处理点击事件，天然不带波纹：

DropdownMenuItem(
    onClick = {}, // 此处留空，点击逻辑由pointerInput接管
    modifier = Modifier
        .pointerInput(Unit) {
            detectTapGestures(onTap = {
                // 自定义点击逻辑
                expanded = false
            })
        }
) {
    Text("菜单选项")
}

方法2：覆盖组件的交互源与指示 #

传入自定义的interactionSource，并配合indication = null的clickable覆盖默认波纹：

val interactionSource = remember { MutableInteractionSource() }
DropdownMenuItem(
    onClick = { expanded = false },
    modifier = Modifier
        .clickable(
            interactionSource = interactionSource,
            indication = null,
            onClick = {}
        ),
    interactionSource = interactionSource
) {
    Text("菜单选项")
}

二、禁用DropdownMenu的波纹效果 #

你之前的方案无效，是因为DropdownMenu的内部交互（比如点击外部区域关闭菜单）是组件自行处理的，外层clickable无法覆盖。可以通过关联交互源并禁用指示来解决：

val interactionSource = remember { MutableInteractionSource() }
DropdownMenu(
    expanded = expanded,
    onDismissRequest = { expanded = false },
    modifier = Modifier
        .indication(interactionSource, null)
        .clickable(
            interactionSource = interactionSource,
            indication = null,
            onClick = {}
        )
) {
    // 菜单选项列表
}

三、调整波纹效果（而非完全禁用） #

如果只是想修改波纹的样式（比如颜色、范围），可以自定义Indication实例：

val customRipple = rememberRipple(color = Color.Green, bounded = true)
DropdownMenuItem(
    onClick = { expanded = false },
    modifier = Modifier
        .clickable(
            interactionSource = remember { MutableInteractionSource() },
            indication = customRipple,
            onClick = {}
        )
) {
    Text("带自定义波纹的选项")
}

内容的提问来源于stack exchange，提问作者Nguyen Tien Dung