Android Compose 为什么当父级可点击时 Checkbox 需要 onCheckChanged？

Question

我试图有一个带有一些尾随文本的复选框。这个想法是，无论您选择复选框本身还是文本，值都会被切换。为了代码的简洁性，我已经在可组合项中完成了所有操作。

选择文本时它按预期工作。但是当我专门按下该复选框时，什么也没有发生。我看到按下复选框产生的链式 react ，但它显然忽略了该行的可点击功能并点击 onCheckChange = {}

我对可组合范围并不完全熟练，所以我认为这可能是由于 Row() 是一个内联函数，所以我尝试将相同的修饰符应用于 Surface > 但这也不起作用。

从两个地点打同样的电话没什么大不了的，我只是想知道为什么。

@Composable
fun CheckboxInRowWithText() {
    var checkedState by remember { mutableStateOf(false) }
    Surface {
        Row(
            modifier = Modifier
                .fillMaxWidth()
                .clickable {
                    checkedState = !checkedState
                },
            verticalAlignment = Alignment.CenterVertically) {
            Checkbox(checked = checkedState, onCheckedChange = {} )

            Text(text = "Clicking this Row will toggle checkbox")
        }
    }
}

Answer 1

您无法单击祖先可组合项的原因并不是因为它位于另一个可组合项下，默认情况下，触摸传播会从后代到祖先，因为 PointerEventPass 是 Main。

Modifier.clickable 不允许父级获取事件的原因是，它调用 PointerEventChange.consume 但您可以编写自己的点击函数以从子级传播到父级或从父级传播到子级或使用有条件地。

您可以查看this answer了解更多详情

您基本上没有对 checkBoxChange 执行任何操作，这就是它不会更改的原因，请在 onCheckedChange 中设置 checkState。

@Composable
fun CheckboxInRowWithText() {

    val context = LocalContext.current

    var checkedState by remember { mutableStateOf(false) }
    Surface {
        Row(
            modifier = Modifier
                .fillMaxWidth()
                .clickable {
                    Toast
                        .makeText(context, "Row clicked", Toast.LENGTH_SHORT)
                        .show()
                    checkedState = !checkedState
                },
            verticalAlignment = Alignment.CenterVertically) {
            Checkbox(checked = checkedState, onCheckedChange = {
                Toast.makeText(context, "Checkbox check", Toast.LENGTH_SHORT).show()
                checkedState = it
            }
            )

            Text(text = "Clicking this Row will toggle checkbox")
        }
    }
}

您也可以像这样构建它，即使单击复选框也会显示波纹。

@Composable
 fun CheckBoxWithTextRippleFullRow(
    label: String,
    state: Boolean,
    onStateChange: (Boolean) -> Unit
) {

    // Checkbox with text on right side
    Row(modifier = Modifier
        .fillMaxWidth()
        .height(40.dp)
        .clickable(
            role = Role.Checkbox,
            onClick = {
                onStateChange(!state)
            }
        )
        .padding(8.dp),
        verticalAlignment = Alignment.CenterVertically
    ) {
        Checkbox(
            checked = state,
            onCheckedChange = null
        )
        Spacer(modifier = Modifier.width(8.dp))
        Text(text = label)
    }
}

结果

点击传播示例

即使使用Button(它是一个Surface，其底层带有Modifier.clickable)，您也可以在可组合项下方单击。

让我们仅为 Button 下面的父级创建我们自己的自定义触摸

private fun Modifier.customTouch(
    pass: PointerEventPass,
    onDown: () -> Unit,
    onUp: () -> Unit
) = this.then(
    Modifier.pointerInput(pass) {
        awaitEachGesture {
            awaitFirstDown(pass = pass)
            onDown()
            waitForUpOrCancellation(pass)
            onUp()
        }
    }
)

并使用 PointerEventPass.Initial 将其分配给父级，无需调用消费，结果为

@Preview
@Composable
private fun GesturePropagationTest() {

    val context = LocalContext.current

    Box(
        modifier = Modifier
            .customTouch(
                pass = PointerEventPass.Initial,
                onDown = {
                    Toast
                        .makeText(context, "Parent down", Toast.LENGTH_SHORT)
                        .show()
                }, onUp = {
                    Toast
                        .makeText(context, "Parent up", Toast.LENGTH_SHORT)
                        .show()
                }
            )
            .padding(bottom = 50.dp)
            .fillMaxSize()
            .padding(20.dp),
        contentAlignment = Alignment.BottomCenter
    ) {
        Button(
            onClick = {
            Toast.makeText(context, "Button is clicked", Toast.LENGTH_SHORT).show()
        }) {
            Text("Click Button")
        }
    }
}