Compose 修改默认点击效果

原创于 2024-10-26 21:23:51 发布 · 605 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#Compse #Compose 点击效果 #Compose基础

Compose 专栏收录该内容

3 篇文章

订阅专栏

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{

    })