Displaying parser tree using Jetpack Compose

Question

I am using Stanford's parser in Android Studio. I want to display a parsed sentence in the form of a tree using Jetpack Compose and I have created two classes that serve this purpose.

The problem I have at the moment is that when I press the button to parse the sentence, It's loading for about 3 seconds and then crashes. I would like to know why the display isn't working. It would be really helpful if someone answered.

Firstly I have the Tree.kt class, which creates and loads the display of the tree.

   @Composable
fun DisplayTree(tree: Tree, level: Int = 0) {
    Column(
        modifier = Modifier
            .fillMaxWidth()
            .padding(start = level.dp * 8)
    ) {
        Text(tree.value(), style = MaterialTheme.typography.h6)
        if (tree.children().isNotEmpty()) {
            LazyColumn {
                items(tree.children()) { child ->
                    DisplayTree(child, level + 1)
                }
            }
        }
    }
}

@Composable
fun SyntaxTreeScreen(sentence: String?) {
    val tree = createDependencyTree(sentence)
    Column(
        modifier = Modifier
            .fillMaxSize()
            .padding(16.dp)
    ) {
        DisplayTree(tree)
    }
}

Then, there's the SecondScreen class, in which the input is created and parsed

@SuppressLint("UnusedMaterialScaffoldPaddingParameter", "UnrememberedMutableState")
@ExperimentalCoilApi
@ExperimentalCoroutinesApi
@ExperimentalPermissionsApi
@Composable
fun secondScreenText(navController: NavHostController, text : String?) {

    val scaffoldState = rememberScaffoldState()



    Scaffold(

        scaffoldState = scaffoldState,
        topBar = {
            TopAppBar(
                title = { },
                backgroundColor = Color(0xFFFFFFFF),
                contentColor = Color(0xFF000000),
                elevation = 0.dp,
                navigationIcon = {
                    IconButton(onClick = {
                        if (text!! != "") {
                            navController.popBackStack()
                            navController.navigate(AppScreens.FirstScreen.route)
                        }
                    }) {
                        Icon(Icons.Default.ArrowBackIos, contentDescription = null)
                    }
                })
        }
    ) {
        Box(
            contentAlignment = Alignment.CenterStart, modifier = Modifier
                .fillMaxSize()
                .background(Color(0xFFFFFFFF))
        ) {
            Column(
                horizontalAlignment = Alignment.CenterHorizontally,
                verticalArrangement = Arrangement.SpaceEvenly,
                modifier = Modifier
                    .fillMaxSize()
                    .padding(start = 40.dp, end = 40.dp, top = 40.dp)
            ) {

                Text(
                    text = "Análisis",
                    fontFamily = Inter,
                    fontSize = 28.sp,
                    modifier = Modifier.weight(0.25f)
                )

                Box(
                    modifier = Modifier
                        .fillMaxSize()
                        .background(Color(0XFFF0F0F0), shape = RoundedCornerShape(25.dp))
                        .weight(1f)
                        .padding(start = 20.dp, end = 20.dp, top = 20.dp),
                    contentAlignment = Alignment.Center
                ) {
                    Column(
                        horizontalAlignment = Alignment.CenterHorizontally,
                        verticalArrangement = Arrangement.Center
                    ) {
                        AutoResizedText(text = text!!, modifier = Modifier.weight(1f), maxLines = 1)
                        SyntaxTreeScreen(sentence = text)
                    }

                }

            }


        }

    }
}

The error is the following

   java.lang.IllegalStateException: Vertically scrollable component was measured with an infinity maximum height constraints, which is disallowed. One of the common reasons is nesting layouts like LazyColumn and Column(Modifier.verticalScroll()). If you want to add a header before the list of items please add a header as a separate item() before the main items() inside the LazyColumn scope. There are could be other reasons for this to happen: your ComposeView was added into a LinearLayout with some weight, you applied Modifier.wrapContentSize(unbounded = true) or wrote a custom layout. Please try to remove the source of infinite constraints in the hierarchy above the scrolling container.

Answer 1

I suspect the reason is the recursive LazyColumn. Try replacing it with a regular Column:

@Composable
private fun DisplayTree(tree: Tree, level: Int = 0) {
    Column(
        modifier = Modifier
            .fillMaxWidth()
            .padding(start = level.dp * 8)
    ) {
        Text(tree.value(), style = MaterialTheme.typography.h6)
        for (child in tree.children()) {
            DisplayTree(child, level + 1)
        }
    }
}