Jetpack Compose中LazyColumn单项展开的状态提升问题

• mutableStateListOf仅在列表元素添加、删除、替换时触发重组，修改元素内部的var属性（如PointsCard.state）不会被感知，因为它不监控元素内部的状态变化。
• 当前代码未实现“点击未展开项时关闭其他已展开项”的逻辑。

以下两种方案均可修复问题，核心是让Compose感知到状态变化：

方案一：不可变数据类+替换列表元素 #

利用data类的copy方法生成新对象替换原元素，触发mutableStateList的重组，同时实现关闭其他项的逻辑：

修改数据类 #

保持数据不可变，用val定义状态：

data class PointsCard(
    val key: Int = 0,
    val state: Boolean = false
)

修改列表逻辑 #

点击时生成新列表，当前项切换状态，其余项强制折叠：

@Preview
@Composable
fun ExpandableCardList() {
    val list = remember { mutableStateListOf(PointsCard(0),PointsCard(1),PointsCard(2),PointsCard(3),PointsCard(4),PointsCard(5))}
    val state = rememberLazyListState()
    Scaffold { paddingValues ->
        LazyColumn(
            state = state,
            modifier = Modifier.fillMaxWidth(),
            contentPadding = paddingValues
        ) {
            items(list, {it.key}) { item ->
                ExpandableCard(
                    expanded = item.state,
                    state = { isExpanded ->
                        val newList = list.map { card ->
                            if (card.key == item.key) {
                                card.copy(state = isExpanded)
                            } else {
                                card.copy(state = false)
                            }
                        }
                        list.clear()
                        list.addAll(newList)
                    }
                )
            }
        }
    }
}

方案二：元素内部状态可观察 #

将PointsCard的state改为MutableState<Boolean>，让Compose直接感知单个元素的状态变化：

修改数据类 #

data class PointsCard(
    val key: Int = 0,
    val state: MutableState<Boolean> = mutableStateOf(false)
)

修改列表逻辑 #

点击时先关闭所有其他项，再切换当前项状态：

@Preview
@Composable
fun ExpandableCardList() {
    val list = remember { mutableStateListOf(PointsCard(0),PointsCard(1),PointsCard(2),PointsCard(3),PointsCard(4),PointsCard(5))}
    val state = rememberLazyListState()
    Scaffold { paddingValues ->
        LazyColumn(
            state = state,
            modifier = Modifier.fillMaxWidth(),
            contentPadding = paddingValues
        ) {
            items(list, {it.key}) { item ->
                ExpandableCard(
                    expanded = item.state.value,
                    state = { isExpanded ->
                        list.forEach { card ->
                            if (card.key != item.key) {
                                card.state.value = false
                            }
                        }
                        item.state.value = isExpanded
                    }
                )
            }
        }
    }
}

保持ExpandableCard不变 #

原ExpandableCard代码无需修改，它仅负责接收状态和回调。

• 方案一更符合Compose单向数据流原则，数据不可变，状态变化通过生成新数据触发重组，便于调试和维护。
• 方案二更适合频繁修改单个元素状态的场景，但需注意避免状态分散管理带来的复杂度。

内容的提问来源于stack exchange，提问作者Ivan Beskorovayniy