Jetpack Compose展示Stanford解析树崩溃问题求助

问题描述 #

在Android Studio中使用Stanford Parser，通过Jetpack Compose以树形结构展示解析后的语句，编写了两个类实现功能，但点击解析按钮后程序加载约3秒即崩溃，无法正常展示解析树。

报错信息 #

java.lang.IllegalStateException: 垂直可滚动组件被测量时使用了无限最大高度约束，这是不允许的。常见原因之一是嵌套布局，比如LazyColumn和Column(Modifier.verticalScroll())。如果你想在项目列表前添加标题，请在LazyColumn范围内的主items()之前添加一个单独的item()作为标题。还可能有其他原因：你的ComposeView被添加到带有weight的LinearLayout中，你应用了Modifier.wrapContentSize(unbounded = true)，或者编写了自定义布局。请尝试移除滚动容器上方层级中产生无限约束的来源。

相关代码 #

Tree.kt #

@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)
    }
}

SecondScreen类 #

@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)
                    }

                }

            }
        }
    }
}

问题分析 #

崩溃的核心原因是嵌套的LazyColumn被赋予了无限高度约束：

1. DisplayTree中，每个包含子节点的Tree都会渲染一个LazyColumn，而这个LazyColumn嵌套在无高度限制的Column内，导致LazyColumn拿到无限高度约束，触发系统报错。
2. SecondScreen的布局层级中，SyntaxTreeScreen的父布局通过weight传递了模糊的高度约束，进一步加剧了无限约束的问题。

解决方案 #

1. 替换嵌套LazyColumn，统一添加滚动 #

树形结构需要整体滚动，而非每个子树独立滚动，将嵌套的LazyColumn替换为普通Column，在外层添加统一的滚动容器：

@Composable
fun DisplayTree(tree: Tree, level: Int = 0) {
    Column(
        modifier = Modifier
            .fillMaxWidth()
            .padding(start = level.dp * 8)
    ) {
        Text(tree.value(), style = MaterialTheme.typography.h6)
        // 用普通Column递归渲染子节点，避免嵌套滚动容器
        Column {
            tree.children().forEach { child ->
                DisplayTree(child, level + 1)
            }
        }
    }
}

@Composable
fun SyntaxTreeScreen(sentence: String?) {
    val tree = createDependencyTree(sentence)
    // 外层添加verticalScroll，让整个树可以统一滚动
    Column(
        modifier = Modifier
            .fillMaxSize()
            .padding(16.dp)
            .verticalScroll(rememberScrollState())
    ) {
        DisplayTree(tree)
    }
}

2. 优化父布局的约束传递 #

给SecondScreen中包裹SyntaxTreeScreen的Column添加明确的高度限制，避免传递无限约束：

// SecondScreen中Box内部的Column修改
Column(
    horizontalAlignment = Alignment.CenterHorizontally,
    verticalArrangement = Arrangement.Center,
    modifier = Modifier.fillMaxHeight() // 明确高度约束
) {
    AutoResizedText(text = text!!, modifier = Modifier.weight(0.2f), maxLines = 1)
    // 给SyntaxTreeScreen分配固定权重，确保拿到有限高度
    SyntaxTreeScreen(sentence = text, modifier = Modifier.weight(0.8f))
}

// 给SyntaxTreeScreen添加modifier参数支持
@Composable
fun SyntaxTreeScreen(sentence: String?, modifier: Modifier = Modifier) {
    val tree = createDependencyTree(sentence)
    Column(
        modifier = modifier
            .padding(16.dp)
            .verticalScroll(rememberScrollState())
    ) {
        DisplayTree(tree)
    }
}

3. 优化解析性能（可选） #

Stanford Parser解析语句属于耗时操作，放在UI线程会导致加载卡顿，建议用协程后台执行：

@Composable
fun SyntaxTreeScreen(sentence: String?, modifier: Modifier = Modifier) {
    val treeState = remember { mutableStateOf<Tree?>(null) }
    
    LaunchedEffect(sentence) {
        if (!sentence.isNullOrEmpty()) {
            // 后台线程执行解析，避免阻塞UI
            val parsedTree = withContext(Dispatchers.IO) {
                createDependencyTree(sentence)
            }
            treeState.value = parsedTree
        }
    }

    treeState.value?.let { tree ->
        Column(
            modifier = modifier
                .padding(16.dp)
                .verticalScroll(rememberScrollState())
        ) {
            DisplayTree(tree)
        }
    } ?: run {
        // 加载中提示
        Box(modifier = Modifier.fillMaxSize(), contentAlignment = Alignment.Center) {
            CircularProgressIndicator()
        }
    }
}

内容的提问来源于stack exchange，提问作者Elías 973