How can I disable a full view in Jetpack Compose

Question

I want to disable a whole view from any interaction (e.g. button presses) when a Boolean in my view model is true. How can I do this in Jetpack Compose without having to disable each of the elements within the view?

See example below as to what I'm trying to do.

@Composable
fun MyView(alertViewModel: AlertViewModel = viewModel()) {

    var text by remember { mutableStateOf(TextFieldValue("")) }

    Column(
        /*

    Disable all elements in the column so I don't need to disable each element individually for example:
    
    modifier = Modifier
    .disabled(
    if (alertViewModel.showAlert == true) {
         true
    } else {
         false
    }

         */
    ) {

        Text(text = "My View")
        
        TextField(
            value = text,
            onValueChange = { newText ->
                text = newText
            }
        )

        Button(onClick = { /*TODO*/ }) {

        }
    }

}

use enabled and set it to the value you want for both textfield and button — Raghunandan, Jan 16 '23 at 21:09
So I have to disable the `Textfield` and `Button` separately? I can't disable the whole `Column`? — Vaz, Jan 16 '23 at 21:13

score 1 · Answer 1 · answered Jan 17 '23 at 13:01

Seems as though it isn't possible to disable a whole view in Jetpack Compose. All interact-able elements such as Button and TextField and have to be set to enabled = false individually.

Buttons: Jetpack Compose: How to disable FloatingAction Button?

TextFields: Jetpack Compose: Disable Interaction with TextField

score 0 · Answer 2 · answered Jan 16 '23 at 22:20

Proceed like this :

@Composable
fun MyView(alertViewModel: AlertViewModel = viewModel()) {

    var text by remember { mutableStateOf(TextFieldValue("")) }

    if (alertViewModel.showAlert == true) {
         Text(text = "Nothing to show")
    } else {

        Column(modifier = Modifier) {
            Text(text = "My View")
            TextField(
                value = text,
                onValueChange = { newText ->
                    text = newText
                }
            )

            Button(onClick = { /*TODO*/ }) {

            }
        }
    }
}

The question is how to disable all elements in the Column. – Gabriele Mariotti Jan 17 '23 at 05:48 — Gabriele Mariotti, Jan 17 '23 at 05:48

How can I disable a full view in Jetpack Compose

2 Answers2