jetpack compose 中的可点击指示是什么？

Question

大家好，我正在 jetpack compose 中做背景选择器。我问了有关背景点击问题的不同问题。我在使用时注意到

indication = LocalIndication.current

在我的内部Modifier.clickable，当尝试单击时，它显示出非常不同的深色，这是我不想要的。您可以查看此视频。当我更改为

indication = rememberRipple(true)

它显示了我想要显示的正确颜色。我尝试查看文档来了解这个有什么用。有人可以指导我这个有什么用，并向我解释我们可以在其中使用的不同类型indication。谢谢

Answer 1

指示 当按下修改的元素时将显示指示。默认情况下，将使用 [LocalInduction] 中的指示。传递null 以不显示任何指示，或从 [LocalInspiration] 传递当前值以显示主题默认值

单击某个项目时，默认显示波纹效果

您可以从您的主题中获取它，使用 RememberRipple 或者您可以编写您自己的指示

本教程中提供了以下示例以及更多Compose示例。你可以测试一下

和rememberRipple()

@Composable
fun CustomRippleExample() {

    Column(
        modifier = Modifier
            .fillMaxWidth()
            .padding(8.dp)
    ) {
        Box(
            contentAlignment = Alignment.Center,
            modifier = modifierWithClip
                .clickable(
                    interactionSource = MutableInteractionSource(),
                    indication = rememberRipple(
                        bounded = true,
                        radius = 250.dp,
                        color = Color.Green
                    ),
                    onClick = {}
                )
        ) {
            Text(
                text = "rememberRipple() bounded",
                color = Color.White
            )
        }

        Spacer(modifier = Modifier.height(8.dp))

        Box(
            contentAlignment = Alignment.Center,
            //  Modifier.clip also bounds ripple
            modifier = modifierNoClip
                .clickable(
                    interactionSource = MutableInteractionSource(),
                    indication = rememberRipple(
                        bounded = false,
                        radius = 250.dp,
                        color = Color.Green
                    ),
                    onClick = {}
                )
        ) {
            Text(
                text = "rememberRipple() unbounded",
                color = Color.White
            )
        }
    }
}

从你的主题

@Composable
fun CustomRippleThemeExample() {

    Column(
        modifier = Modifier
            .fillMaxWidth()
            .padding(8.dp)
    ) {

        CompositionLocalProvider(LocalRippleTheme provides CustomRippleTheme(Color.Cyan)) {
            Box(
                modifier = modifierWithClip.clickable {},
                contentAlignment = Alignment.Center
            ) {
                Text(
                    text = "Custom Ripple Theme",
                    color = Color.White
                )
            }
        }

        Spacer(modifier = Modifier.height(8.dp))

        CompositionLocalProvider(LocalRippleTheme provides CustomRippleTheme(Color.Magenta)) {
            Box(
                modifier = modifierWithClip.clickable {},
                contentAlignment = Alignment.Center
            ) {
                Text(
                    text = "Custom Ripple Theme",
                    color = Color.White
                )
            }
        }
    }
}

定制指示

private class CustomIndication(
    val pressColor: Color = Color.Red,
    val cornerRadius: CornerRadius = CornerRadius(16f, 16f),
    val alpha: Float = 0.5f,
    val drawRoundedShape: Boolean = true
) : Indication {

    private inner class DefaultIndicationInstance(
        private val isPressed: State<Boolean>,
    ) : IndicationInstance {

        override fun ContentDrawScope.drawIndication() {

            drawContent()
            when {
                isPressed.value -> {
                    if (drawRoundedShape) {
                        drawRoundRect(
                            cornerRadius = cornerRadius,
                            color = pressColor.copy(
                                alpha = alpha
                            ), size = size
                        )
                    } else {

                        drawCircle(
                            radius = size.width,
                            color = pressColor.copy(
                                alpha = alpha
                            )
                        )
                    }
                }
            }
        }
    }

    @Composable
    override fun rememberUpdatedInstance(interactionSource: InteractionSource): IndicationInstance {
        val isPressed = interactionSource.collectIsPressedAsState()
        return remember(interactionSource) {
            DefaultIndicationInstance(isPressed)
        }
    }
}

例子

@Composable
fun CustomIndicationExample() {

    Column(
        modifier = Modifier
            .fillMaxWidth()
            .padding(8.dp)
    ) {


        val indication1: CustomIndication = CustomIndication(
            pressColor = Color.Cyan,
            cornerRadius = CornerRadius(30f, 30f),
            alpha = .7f
        )

        val indication2: CustomIndication = CustomIndication(
            pressColor = Color.Red,
            cornerRadius = CornerRadius(16f, 16f),
            alpha = .5f
        )

        val indication3: CustomIndication = CustomIndication(
            pressColor = Color(0xffFFEB3B),
            alpha = .4f,
            drawRoundedShape = false,
        )

        Box(
            modifierWithClip
                .clickable(
                    interactionSource = MutableInteractionSource(),
                    indication = indication1,
                    onClick = {}
                ),
            contentAlignment = Alignment.Center) {
            Text(
                text = "Custom Indication",
                color = Color.White
            )
        }

        Spacer(modifier = Modifier.height(8.dp))

        Box(
            modifierWithClip
                .clickable(
                    interactionSource = MutableInteractionSource(),
                    indication = indication2,
                    onClick = {}
                ),
            contentAlignment = Alignment.Center) {
            Text(
                text = "Custom Indication",
                color = Color.White
            )
        }

        Spacer(modifier = Modifier.height(8.dp))

        Box(
            Modifier.fillMaxWidth()
                .height(200.dp)
                .clickable(
                    interactionSource = MutableInteractionSource(),
                    indication = indication3,
                    onClick = {}
                ),
            contentAlignment = Alignment.Center) {
            Text(
                text = "Custom Indication with Circle Shape",
                color = Color.White
            )
        }
    }
}