Compose自定义条件Modifier扩展函数失效：条件为真时前置样式丢失

算力阿峰

2026-6-22

问题原因及解决方案

问题根源

你的conditional扩展函数本身逻辑没问题，但使用lambda时没有基于已有Modifier叠加，而是直接创建了新的Modifier覆盖了之前的样式。

具体来说：

当你在conditional的lambda里写clickable { onClick() }时，这里的clickable是直接调用Modifier.clickable()生成了一个全新的Modifier，而不是在之前已经设置了width、background的Modifier基础上添加点击行为。
所以当enabled为true时，整个Modifier会被替换成仅包含clickable的实例，之前的宽高、背景样式全部丢失。

两种修复方案

方案1：在lambda中显式基于`this`叠加

直接在lambda里用this调用clickable，确保是在原有Modifier上扩展：

Modifier
    .width(60.dp)
    .background(
        color = if (enabled) Blue02 else Gray1,
        shape = RoundedCornerShape(8.dp)
    )
    .conditional(enabled) {
        this.clickable { onClick() } // 显式使用this叠加
    }

方案2：修改扩展函数的参数类型（更简洁）

把扩展函数的ifTrue参数从Modifier.() -> Modifier改为Modifier.() -> Unit，利用also在原Modifier上执行扩展逻辑，避免替换：

inline fun Modifier.conditional(
    condition: Boolean,
    ifTrue: Modifier.() -> Unit
): Modifier = if (condition) {
    this.also(ifTrue) // 在原Modifier上执行扩展，不替换
} else {
    this
}

使用时就可以直接写clickable，不需要额外的this：

Modifier
    .width(60.dp)
    .background(
        color = if (enabled) Blue02 else Gray1,
        shape = RoundedCornerShape(8.dp)
    )
    .conditional(enabled) {
        clickable { onClick() } // 直接调用，自动叠加在原有Modifier上
    }