嵌套列不重组

Question

我有嵌套列，当我单击添加按钮时，目标是添加另一个文本字段，当我单击删除按钮（由于第一个索引而仍然隐藏）时，目标是删除其文本字段。 似乎没有重组，但列表大小已更改。

我试过使用 LazyColumn 和 foreach 内部导致强制关闭，仍然没有运气。 任何帮助表示赞赏，谢谢！

我当前的代码：

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

Answer 1

如docs中所述，不可观察的可变对象（例如 mutableListOf()）不可被 Compose 观察并且不会触发重组。

所以而不是

val list = remember {
    mutableStateListOf<MutableList<String>>()
}

使用：

val list = remember {
    mutableStateListOf<List<String>>()
}

当您需要更新列表时，创建一个新列表：

//parent.add("")
list[indexParent] = parent + ""