Jetpack Compose 中没有连锁反应

Question

当我点击“我已将 MyTheme(){} 添加到主 @Composable 屏幕”时，没有任何连锁反应，MyBox()但它不起作用。是不是少了什么？

@Composable
private MyBox(onClickInvoked: () -> Unit) {
    MyAppTheme(isSystemInDarkTheme()) {
        Box(
            modifier = Modifier
                .fillMaxWidth()
                .wrapContentHeight()
                .clip(RoundedCornerShape(10.dp))
                .background(MaterialTheme.colors.onBackground)
                .clickable(onClick = { onClickInvoked.invoke() })
                .padding(horizontal = 10.dp, vertical = 15.dp)
        ) {
            Text(
                text = "My text",
                modifier = Modifier
                    .align(Alignment.CenterStart)
                    .padding(end = 95.dp)
                    .wrapContentWidth()
                    .wrapContentHeight(),
                color = MaterialTheme.colors.primary
            )
            Image(
                painter = painterResource(R.drawable.icon),
                modifier = Modifier
                    .align(Alignment.CenterEnd)
                    .padding(end = 20.dp)
                    .size(60.dp)
            )
        }
    }
}

Answer 1

indication在 compose 1.0.5 中，我看到设置后的默认值clickable是 LocalIndication.current。并且LocalIndication.current是PlatformRipple。因此，设置为 后clickable，Box会产生连锁反应。

在你的情况下，我认为波纹效果不会显示，因为你的盒子背景太暗（通常MaterialTheme.colors.onBackground在浅色主题上是黑色）

我认为您可以更改波纹效果颜色以使其易于查看。

Surface(
    onClick = { onClickInvoked.invoke() },
    modifier = Modifier.fillMaxWidth(),
    shape = RoundedCornerShape(10.dp),
    color = MaterialTheme.colors.onBackground, // normally it is black on Light theme
    indication = rememberRipple(color = Color.White) // color for your ripple, you can use other suitable MaterialTheme.colors for your case to support Light/Dark mode
) {
    Box(modifier = Modifier.padding(horizontal = 10.dp, vertical = 15.dp)) {
        // your Box content
        ...
    }
}

有一个Modifier.indication，但经过测试后我发现它不起作用，Modifier.clickable所以我使用Surface