Compose 默认点击效果修改
- 一、Compose的默认点击效果
- 二、实现自己的点击效果
一、Compose的默认点击效果
使用Modifier.clickables可以使Text有点击效果
Text(text = "我是Text", modifier = Modifier.clickable {
})
源码分析,点击效果clickable方法中的indication来实现的。
在Indication.kt中,indication默认是由DefaultDebugIndication实现的。
NoIndication是没有点击效果
二、实现自己的点击效果
比如实现一个红色、并且带有圆角的点击效果
@SuppressLint("ModifierFactoryUnreferencedReceiver")
fun Modifier.clickRed(
enabled: Boolean = true,
onClickLabel: String? = null,
role: Role? = null,
onClick: () -> Unit
) = composed(
inspectorInfo = debugInspectorInfo {
name = "clickable"
properties["enabled"] = enabled
properties["onClickLabel"] = onClickLabel
properties["role"] = role
properties["onClick"] = onClick
}
) {
Modifier.clickable(
enabled = enabled,
onClickLabel = onClickLabel,
onClick = onClick,
role = role,
indication = RedLocalIndication.current,
interactionSource = remember { MutableInteractionSource() }
)
}
val RedLocalIndication = staticCompositionLocalOf<Indication> {
RedBgIndication
}
private object RedBgIndication : Indication {
private class RedBgIndication(
private val isPressed: State<Boolean>,
private val isHovered: State<Boolean>,
private val isFocused: State<Boolean>,
) : IndicationInstance {
override fun ContentDrawScope.drawIndication() {
drawContent()
if (isPressed.value) {
// 点击红色效果
drawRoundRect(
color = Color(0x52ff0000),
cornerRadius = CornerRadius(4.dp.toPx()),
size = size
)
} else if (isHovered.value || isFocused.value) {
drawRect(color = Color.Black.copy(alpha = 0.1f), size = size)
}
}
}
@Composable
override fun rememberUpdatedInstance(interactionSource: InteractionSource): IndicationInstance {
val isPressed = interactionSource.collectIsPressedAsState()
val isHovered = interactionSource.collectIsHoveredAsState()
val isFocused = interactionSource.collectIsFocusedAsState()
return remember(interactionSource) {
RedBgIndication(isPressed, isHovered, isFocused)
}
}
}
// 使用
Text(text = "我是Text", modifier = Modifier.clickRed{
})