Jetpack Compose 中缺少波纹效果

Question

我做了一个简单的应用程序。 它有两个屏幕：onBoarding 和 homeScreen：

@Composable
fun DigitalBanking() {
    var shouldShowOnBoarding by rememberSaveable { mutableStateOf(true) }
    if (shouldShowOnBoarding) {
        OnBoardingScreen {
            shouldShowOnBoarding = false
        }
    } else {
        MainScreen()
    }
}


@Composable
fun OnBoardingScreen(
    onClick: () -> Unit
) {

    Surface {
        Column(
            modifier = Modifier.fillMaxSize(),
            verticalArrangement = Arrangement.Top,
            horizontalAlignment = Alignment.CenterHorizontally
        ) {
            Box(
                modifier = Modifier
                    .fillMaxSize()
                    .background(color = MaterialTheme.colors.onBackground)
            )
            {
                Image(
                    painter = painterResource(id = R.drawable.starting_screen),
                    contentDescription = null,
                    modifier = Modifier
                        .fillMaxSize()
                        .padding(bottom = 160.dp)
                )
                Column(
                    modifier = Modifier
                        .fillMaxSize()
                        .padding(horizontal = 16.dp),
                    verticalArrangement = Arrangement.Bottom,
                    horizontalAlignment = Alignment.Start,
                ) {
                    Text(
                        text = stringResource(id = R.string.on_boarding_moto),
                        color = MaterialTheme.colors.background,
                        style = Typography.h4,
                    )
                    Text(
                        modifier = Modifier
                            .padding(vertical = 8.dp),
                        text = stringResource(id = R.string.on_boarding_lure),
                        color = MaterialTheme.colors.onSecondary,
                        fontFamily = FontFamily(Font(R.font.plus_jakarta_sans)),
                    )
                    Button(
                        modifier = Modifier`enter code here`
                            .padding(vertical = 8.dp)
                            .fillMaxWidth(),
                        colors = ButtonDefaults.buttonColors(backgroundColor = ArcTransferColor),
                        onClick = onClick,
                    ) {
                        Text(
                            text = "Get Started!",
                            style = MaterialTheme.typography.button,
                        )
                    }
                }
            }
        }
    }
}

流程是：当我在登机屏幕上时，我只能点击一个按钮“开始”并打开主屏幕。 它工作正常，但是当我点击这个按钮时没有连锁反应。 你能告诉我该怎么做吗？

Answer 1

您可以使用 Modifier 的 clickable 属性并提供如下交互式波纹效果：

             Button(
                modifier = Modifier`enter code here`
                        .padding(vertical = 8.dp)
                    .fillMaxWidth()
                    .clickable(
                        interactionSource = MutableInteractionSource(),
                        indication = rememberRipple(bounded = false, color = ColorPrimary),
                        onClick = {
                            /*TODO*/
                        }
                    ),
                colors = ButtonDefaults.buttonColors(backgroundColor = ArcTransferColor),
                onClick = /*onClick--->You can remove this now*/,
            ) {
                Text(
                    text = "Get Started!",
                    style = MaterialTheme.typography.button,
                )
            }

Answer 2

你可以做一个扩展 function 修改器没有连锁反应

fun Modifier.noRippleEffect( onClick: () -> Unit) = composed {
    clickable(
        interactionSource = remember { MutableInteractionSource() },
        indication = rememberRipple(radius = 0.dp)
    ) {
        onClick()
    }
}

并像这样使用它

Box(
        modifier = Modifier
            .padding(horizontal = 10.dp)
            .noRippleEffect {
                onTitleUpdate(title)
            }
    ) {
}