如何在 Jetpack Compose 中同时禁用所有组件的交互

Question

我有一个列（非全屏），其中包含一些组件，如 TextFiled、Chip 等。并且有一个“提交”按钮，单击此按钮后我需要禁用所有组件交互（单击、键入）。

有没有什么合适且简单的方法来满足这个要求，而不需要逐一禁用每个组件？

例如。显示透明覆盖层

Answer 1

如果您添加同级 Box 可组合项并根据标志在其上设置点击侦听器，您将能够禁用每个交互。

@Composable
fun TouchDisable(
    modifier: Modifier = Modifier,
    disableTouch: Boolean,
    content: @Composable () -> Unit
) {
    val focusManager = LocalFocusManager.current

    LaunchedEffect(disableTouch) {
        if (disableTouch) {
            focusManager.clearFocus()
        }
    }

    Box(
        modifier = modifier
    ) {
        content()
        Box(
            modifier = Modifier.matchParentSize().then(
                if (disableTouch) {
                    Modifier.clickable(
                        interactionSource = remember { MutableInteractionSource() },
                        indication = null,
                        onClick = {}
                    )
                } else {
                    Modifier
                }
            )
        )
    }
}

演示

@Preview
@Composable
private fun TouchTest() {
    Column {

        var disableTouch by remember { mutableStateOf(true) }
        var text by remember { mutableStateOf("Text") }

        Button(
            onClick = {
                disableTouch = disableTouch.not()
            }
        ) {
            Text("Disabled: $disableTouch")
        }

        TouchDisable(
            disableTouch = disableTouch,
            modifier = Modifier.fillMaxWidth().height(200.dp).border(2.dp, Color.Red)
        ) {
            Column {
                Button(
                    onClick = {}
                ) {
                    Text("Button1")
                }

                Button(
                    onClick = {}
                ) {
                    Text("Button2")
                }

                TextField(
                    text,
                    onValueChange = { text = it }
                )
            }
        }
    }
}