👆 点击事件 Modifier.clickable

🎒 中小学生色系课堂 在 Jetpack Compose 中，点击是最基础也最强大的手势。我们深入 Modifier.clickable 的回调机制， 并理清它与底层 Modifier.pointerInput 的适用边界。

📌 1. Modifier.clickable · 开箱即用

Modifier.clickable 是 Compose 为通用点击场景提供的高级抽象。它封装了按下、抬起、视觉反馈（涟漪）、无障碍等行为。

🔹 基础 onClick 回调

// 最简单的点击 —— 自带波纹与无障碍
Box(
    modifier = Modifier
        .size(120.dp)
        .background(Color(0xFFFAD7A0))
        .clickable { 
            // onClick 回调
            println("📣 按钮被点击")
        }
) {
    Text("点我", modifier = Modifier.align(Alignment.Center))
}

只需一个 lambda，Compose 自动处理触摸消抖、视觉反馈、无障碍事件。适合 80% 的点击场景。

⚙️ 2. onClick 回调与定制参数

clickable 不止一个 lambda，还支持 interactionSource、indication、enabled 等。

// 定制 enabled 与 interactionSource
val interactionSource = remember { MutableInteractionSource() }

Box(
    modifier = Modifier
        .size(140.dp, 60.dp)
        .background(if (enabled) Color(0xFFB5D3E8) else Color.LightGray)
        .clickable(
            enabled = enabled,
            interactionSource = interactionSource,
            indication = rememberRipple(bounded = true)
        ) {
            println("✅ 可点击状态: $enabled")
        }
) {
    Text("开关点击", modifier = Modifier.align(Alignment.Center))
}

⚡ 3. clickable 与 pointerInput 的本质区别

Modifier.pointerInput 是 Compose 底层手势原始 API，而 clickable 基于它构建，但提供了更高层的封装。

🔸 什么时候用 pointerInput 代替 clickable？

• 需要监听 按下/抬起/移动 的详细状态
• 实现 双击、长按、拖拽、缩放 等复合手势
• 需要 阻止 默认涟漪或无障碍行为
• 对事件消费有精细控制（如手势冲突）

📐 4. 代码对比 · clickable vs pointerInput

左：clickable  |  右：pointerInput 实现相同点击效果

// clickable 一行搞定
Box(
    modifier = Modifier
        .size(100.dp)
        .background(Color(0xFFFAD7A0))
        .clickable { 
            println("clickable 点击")
        }
)

// pointerInput 原始实现
Box(
    modifier = Modifier
        .size(100.dp)
        .background(Color(0xFFFAD7A0))
        .pointerInput(Unit) {
            detectTapGestures(
                onTap = { 
                    println("pointerInput 点击")
                }
            )
        }
)

detectTapGestures 是 pointerInput 的辅助函数，但依然缺少涟漪与无障碍。若完全手写原始指针，代码更长。

🧩 5. 点击事件体系 · 架构图

⬆️ 从 clickable 到原始 pointerInput，抽象层级逐渐降低，灵活性升高

🧠 6. 最佳实践 · 何时选择？