喷气背包组合中的波纹效果无法正常工作

我正在研究jetpack compose中的连锁反应。我提供了我的颜色，单击视图后，它会在一段时间后显示不同类型的颜色，在按下状态时显示为深灰色。

binding.itemComposable.setContent {
            Column(modifier = Modifier.fillMaxSize(), verticalArrangement = Arrangement.spacedBy(12.dp)) {
                val options = getOptions()
                options.forEachIndexed { _, optionText ->
                    val interactionSource = remember { MutableInteractionSource() }
                    val isPressed by interactionSource.collectIsPressedAsState()
                    val backgroundColor = if (isPressed) DuckEggBlue else OffWhite
                    val textColor = if (isPressed) TealBlue else Slate
                    val borderWidth = if (isPressed) 1.dp else 0.dp
                    val borderColor = if (isPressed) Aqua else OffWhite
                    Surface(
                        onClick = {
                            logE("Item Click")
                        },
                        shape = RoundedCornerShape(4.dp),
                        border = BorderStroke(borderWidth, borderColor),
                        interactionSource = interactionSource
                    ) {
                        Text(
                            modifier = Modifier
                                .fillMaxWidth()
                                .background(backgroundColor)
                                .padding(16.dp),
                            text = optionText,
                            style = Typography.h3,
                            fontWeight = FontWeight.Medium,
                            color = textColor
                        )
                    }
                }
            }
        }

预期输出

上图可以清楚地看到波纹效果。

实际产量

我无法添加图像，而是添加了我的 YouTubevideo https://youtube.com/shorts/HyOJUZcDHGw?feature=share。请看一看。

val DuckEggBlue = Color(0xFFF0FCFC)

这是我正在使用的颜色。

谁能指导我这里出了什么问题。

UPDATE

我尝试从这个doc https://developer.android.com/jetpack/compose/themes/material#ripples

@Immutable
private object SecondaryRippleTheme : RippleTheme {
    @Composable
    override fun defaultColor() = RippleTheme.defaultRippleColor(
        contentColor = DuckEggBlue,
        lightTheme = true
    )

    @Composable
    override fun rippleAlpha() = RippleTheme.defaultRippleAlpha(
        contentColor = DuckEggBlue,
        lightTheme = true
    )
}

在我的代码中

CompositionLocalProvider(LocalRippleTheme provides SecondaryRippleTheme) {
            Text(
                modifier = Modifier
                    .fillMaxWidth()
                    .background(OffWhite)
                    .padding(16.dp),
                text = optionText,
                style = Typography.h3,
                fontWeight = FontWeight.Medium,
                color = textColor
            )
    }

但没有任何作用。它仍然是灰色的波纹效果。

我尝试了很多选项 Box、Surface、使用 PointerInput 来延迟，但也许在视觉上，当您更改具有相同波纹的背景颜色时它不起作用

Surface(
    modifier = Modifier
        .indication(
            interactionSource = interactionSource,
            rememberRipple(
                color = Color.Cyan
            )
        )
    ,
    shape = RoundedCornerShape(4.dp),
    contentColor = backgroundColor,
    border = BorderStroke(borderWidth, borderColor),
    onClick = {},
    interactionSource = interactionSource

    ) {
    Text(
        modifier = Modifier
            .fillMaxWidth()
            .padding(16.dp),
        text = optionText,
        fontWeight = FontWeight.Medium,
        color = textColor
    )
}

颜色.青色

如果您在按下波纹更明显时不改变颜色，但您的颜色太浅而无法应用波纹，因为我用其他颜色进行了测试。

我尝试将 PointerInput 更改为带有初始 false 值的布尔值

                    Modifier.pointerInput(Unit) {
                        detectTapGestures(onPress = { offset ->
                            isPressed = true
                            val press = PressInteraction.Press(offset)
//                            delay(50)
                            interactionSource.emit(press)
                            tryAwaitRelease()
                            interactionSource.emit(PressInteraction.Release(press))
                            isPressed = false
                        })
                    }