Jetpack Compose嵌套列无法重组，增删文本框无UI更新求助

我在Jetpack Compose中实现了嵌套列布局，预期点击添加按钮可新增文本框，点击删除按钮（首个文本框的删除按钮隐藏）可移除对应文本框。目前列表尺寸已变化，但UI未触发重组。尝试过使用LazyColumn，却导致应用崩溃，仍未解决问题，恳请帮助。

界面预览：

当前代码 #

@Composable
fun ProblemScreen() {
    val list = remember {
        mutableStateListOf<MutableList<String>>()
    }

    LaunchedEffect(key1 = Unit, block = {
        repeat(3) {
            val listDesc = mutableListOf<String>()
            repeat(1) {
                listDesc.add("")
            }
            list.add(listDesc)
        }
    })

    Column(
        modifier = Modifier
            .fillMaxSize()
            .background(MaterialTheme.colors.background)
    ) {
        list.forEachIndexed { indexParent, parent ->
            Column(
                modifier = Modifier
                    .fillMaxWidth()
                    .padding(vertical = 8.dp, horizontal = 16.dp)
            ) {
                Row(
                    modifier = Modifier.fillMaxWidth(),
                    verticalAlignment = Alignment.CenterVertically
                ) {
                    Text(text = "Parent ${indexParent + 1}", fontSize = 18.sp)
                    Spacer(modifier = Modifier.weight(1f))
                    Button(onClick = {
                        parent.add("")
                        println("PARENT SIZE : ${parent.size}")
                    }) {
                        Icon(imageVector = Icons.Rounded.Add, contentDescription = "Add")
                    }
                }
                parent.forEachIndexed { indexChild, child ->
                    Row(
                        modifier = Modifier
                            .fillMaxWidth()
                            .padding(top = 16.dp),
                        verticalAlignment = Alignment.CenterVertically
                    ) {
                        TextField(
                            value = "",
                            onValueChange = {

                            },
                            colors = TextFieldDefaults.textFieldColors(),
                            maxLines = 1,
                            modifier = Modifier.weight(1f)
                        )
                        Spacer(modifier = Modifier.width(16.dp))
                        Button(
                            onClick = {
                                parent.removeAt(indexChild)
                            },
                            modifier = Modifier.alpha(if (indexChild != 0) 1f else 0f)
                        ) {
                            Icon(
                                imageVector = Icons.Rounded.Delete,
                                contentDescription = "Delete"
                            )
                        }
                    }
                }
            }
        }
    }
}

问题原因与修复方案 #

核心问题 #

外层用了mutableStateListOf，但内部的MutableList<String>不是Compose的可观察状态容器。当你修改内部列表的元素（添加/删除）时，Compose无法感知到状态变化，因此不会触发UI重组。

修复步骤 #

1. 替换内部列表为可观察状态：把内部的mutableListOf<String>改成mutableStateListOf<String>，这样内部列表的任何变化都会被Compose监听。
2. 绑定TextField的输入值：当前TextField的value硬编码为空字符串，无法保存用户输入，需要绑定到列表中的对应元素，并在onValueChange时更新列表。
3. 优化删除按钮的可见性：用Modifier.alpha只是视觉隐藏，按钮仍可点击，建议改用visible修饰符配合enabled，彻底禁用首个文本框的删除按钮。
4. 解决LazyColumn崩溃问题：如果使用LazyColumn，必须给每个item设置唯一的key参数，避免重组时出现索引混乱导致崩溃。

修改后的完整代码 #

@Composable
fun FixedProblemScreen() {
    val list = remember {
        mutableStateListOf<MutableList<String>>().apply {
            // 初始化数据，直接用mutableStateListOf作为内部列表
            repeat(3) {
                add(mutableStateListOf(""))
            }
        }
    }

    Column(
        modifier = Modifier
            .fillMaxSize()
            .background(MaterialTheme.colors.background)
    ) {
        list.forEachIndexed { indexParent, parent ->
            Column(
                modifier = Modifier
                    .fillMaxWidth()
                    .padding(vertical = 8.dp, horizontal = 16.dp)
            ) {
                Row(
                    modifier = Modifier.fillMaxWidth(),
                    verticalAlignment = Alignment.CenterVertically
                ) {
                    Text(text = "Parent ${indexParent + 1}", fontSize = 18.sp)
                    Spacer(modifier = Modifier.weight(1f))
                    Button(onClick = {
                        parent.add("")
                    }) {
                        Icon(imageVector = Icons.Rounded.Add, contentDescription = "Add")
                    }
                }
                parent.forEachIndexed { indexChild, child ->
                    Row(
                        modifier = Modifier
                            .fillMaxWidth()
                            .padding(top = 16.dp),
                        verticalAlignment = Alignment.CenterVertically,
                        // 给每个Row设置唯一key，避免重组问题
                        key = "parent-$indexParent-child-$indexChild"
                    ) {
                        TextField(
                            value = child,
                            onValueChange = { newText ->
                                parent[indexChild] = newText
                            },
                            colors = TextFieldDefaults.textFieldColors(),
                            maxLines = 1,
                            modifier = Modifier.weight(1f)
                        )
                        Spacer(modifier = Modifier.width(16.dp))
                        Button(
                            onClick = {
                                parent.removeAt(indexChild)
                            },
                            // 首个文本框隐藏并禁用删除按钮
                            enabled = indexChild != 0,
                            modifier = Modifier.visible(indexChild != 0)
                        ) {
                            Icon(
                                imageVector = Icons.Rounded.Delete,
                                contentDescription = "Delete"
                            )
                        }
                    }
                }
            }
        }
    }
}

// 扩展Modifier的visible方法
fun Modifier.visible(visible: Boolean): Modifier =
    this.then(if (visible) Modifier else Modifier.size(0.dp))

关于LazyColumn的使用 #

如果要改用LazyColumn，只需把外层的Column替换为LazyColumn，并给每个父项设置key即可，示例：

LazyColumn(
    modifier = Modifier
        .fillMaxSize()
        .background(MaterialTheme.colors.background)
) {
    items(list, key = { parentList -> parentList }) { parent ->
        // 原有的父项Column代码...
    }
}

内容的提问来源于stack exchange，提问作者Erwin Kurniawan A