Compose 中的 Indication

Indication：反馈视觉效果

1. 一句话理解

Indication 是 Compose 中专门用来处理“点击反馈视觉效果”的机制。
当你点击一个按钮时，那种“波纹扩散（Ripple）”或者“背景变暗”的视觉动效，在代码层面就是由 Indication 控制的。

2. 核心作用

• 交互确认：告诉用户“你确实点到我了”。
• 状态表现：区分“按下（Pressed）”、“聚焦（Focused）”和“松开”等状态。

3. 实战：如何实现一个带点击反馈的组件？

在 Compose 中，最常用的 Indication 实现就是 Ripple（水波纹）。

场景 A：使用系统默认波纹（最简单）

如果你直接使用 Modifier.clickable，系统会自动帮你处理 Indication。

Box(
    modifier = Modifier
        .size(100.dp)
        .background(Color.LightGray)
        .clickable { /* 点击逻辑 */ } // 默认自带水波纹
)

场景 B：自定义波纹颜色或边界

如果你觉得默认波纹不好看，可以手动配置。

val interactionSource = remember { MutableInteractionSource() }

Box(
    modifier = Modifier
        .size(100.dp)
        .clickable(
            interactionSource = interactionSource,
            // 使用 rememberRipple 自定义颜色和半径
            indication = rememberRipple(
                color = Color.Red, 
                bounded = true // true: 波纹限制在圆角内; false: 波纹会扩散出边界
            ),
            onClick = { println("Clicked!") }
        )
)

4. 进阶：如何彻底去掉点击效果？

在你之前的代码中，为了实现自定义的“遮罩层”反馈，我们需要关掉系统默认的 Indication。

Box(
    modifier = Modifier
        .clickable(
            interactionSource = remember { MutableInteractionSource() },
            indication = null, // 设置为 null，点击时就不会有任何自带的波纹
            onClick = { /* 执行逻辑 */ }
        )
)

5. 常见问题 (FAQ)

Q: 为什么我的波纹是方形的，我的组件是圆角的？

A: 必须先写 .clip(RoundedCornerShape)，再写 .clickable。或者在 indication 参数中使用 rememberRipple 配合正确的 shape。

Q: 为什么我设置了 indication 但没反应？

A: 确保你传入了 interactionSource。Indication 依赖这个“源”来监听你的手指按下和抬起。

6. 总结