I have many Composables and I want to collapse Composable code inside like in xml. Is there extension for that?

CodePudding user response：

If you wish to make your Column collapse or expand without animation you simply need to add a if statement and set true to display false to collapse

var visible by remember { mutableStateOf(true) }

Column(modifier = Modifier.fillMaxSize()) {

    Text("Click to expand or collapse", modifier = Modifier
        .fillMaxWidth()
        .clickable {
            visible = !visible
        }
    )
    if(visible) {
      // Content to be collapsed or displayed
    }
}

If you wish to collapse or expand with animation you can check out AnimatedVisbility composable

var visible by remember {
    mutableStateOf(true)
}

Column(modifier = Modifier.fillMaxSize()) {

    Text("Click to expand or collapse", modifier = Modifier
        .fillMaxWidth()
        .clickable {
            visible = !visible
        }
    )
    AnimatedVisibility(visible = visible) {
        Column {
          // Content to be collapsed or displayed
        }
    }
}

CodePudding user response：

Your post title is a bit misleading, but I think your'e asking how to collapse/expand "code" not the actual widget/ui.

I'm not sure if this is exactly what you want, but you can expand/collapse a specific area of your code if you wrap them within region/endregion without the need of any plugin or configuration, its almost the same behavior that your'e expecting from the xml editor, and you can do this anywhere not only to a function.

expanded code region

collapsed code region