在jetpack compose中单击另一个组件时触发单击效果

Question

我连续有一张卡。两者都是可点击的，但是当我点击其中一个时，我希望另一个也能触发点击效果。

是否有可能做到这一点？

这是我到目前为止的代码

@ExperimentalMaterialApi
@Composable
fun GlobalSettingItem(
    iconDrawable: Int,
    title: Int,
    onClick: () -> Unit
) {
    Row(
        modifier = Modifier
            .fillMaxWidth()
            .clickable(enabled = true, onClick = onClick),
        verticalAlignment = Alignment.CenterVertically,
        horizontalArrangement = Arrangement.Start,
    ) {
        Card(
            modifier = Modifier
                .padding(start = 16.dp, top = 4.dp, bottom = 8.dp)
                .size(50.dp),
            backgroundColor = MaterialTheme.myTheme.background,
            shape = CircleShape,
            onClick = { },
            elevation = 0.dp,
        ) {
            Box(contentAlignment = Alignment.Center) {
                Icon(
                    painter = painterResource(id = iconDrawable),
                    contentDescription = "Settings Icon",
                    tint = MaterialTheme.myTheme.colorAccent,
                    modifier = Modifier
                        .width(24.dp)
                        .height(24.dp),
                )
            }
        }
        Text(
            modifier = Modifier.padding(start = 4.dp),
            text = stringResource(title),
            color = MaterialTheme.myTheme.onBackground,
            style = TextStyle(fontSize = 16.sp),
            )
    }
}

Answer 1

要同步多个“点击效果”，Composables您需要在它们之间共享相同的InteractionSource对象，以便它们可以对相同的状态做出反应。
默认情况下，每个可点击元素分别创建（和remembers）其状态，但如果您希望对其有更多控制，您始终可以从外部将其传递给它。

和 都有Modifier.clickable可以Card通过的变体interactionSource。在中，clickable您还需要传递indication，因为该参数没有默认值（如在 中Card），但该值只是从 中获取LocalIndication.current。

我认为您还应该分配您的onClickin Card，否则它会消耗点击次数并且不会对其执行任何操作。这可能不是您想要的，但我不确定您的意图。

@ExperimentalMaterialApi
@Composable
fun GlobalSettingItem(
    iconDrawable: Int,
    title: Int,
    onClick: () -> Unit
) {
    val interactionSource = remember { MutableInteractionSource() }

    Row(
        modifier = Modifier
            .fillMaxWidth()
            .clickable(
                enabled = true,
                interactionSource = interactionSource,
                indication = LocalIndication.current,
                onClick = onClick
            ),
        verticalAlignment = Alignment.CenterVertically,
        horizontalArrangement = Arrangement.Start,
    ) {
        Card(
            modifier = Modifier
                .padding(start = 16.dp, top = 4.dp, bottom = 8.dp)
                .size(50.dp),
            backgroundColor = MaterialTheme.myTheme.background,
            shape = CircleShape,
            interactionSource = interactionSource,
            onClick = onClick,
            elevation = 0.dp,
        ) {
            Box(contentAlignment = Alignment.Center) {
                Icon(
                    painter = painterResource(id = iconDrawable),
                    contentDescription = "Settings Icon",
                    tint = MaterialTheme.myTheme.colorAccent,
                    modifier = Modifier
                        .width(24.dp)
                        .height(24.dp),
                )
            }
        }
        Text(
            modifier = Modifier.padding(start = 4.dp),
            text = stringResource(title),
            color = MaterialTheme.myTheme.onBackground,
            style = TextStyle(fontSize = 16.sp),
        )
    }
}