Jetpack Compose中从LazyColumn高效移除列表项的正确方法

现有代码的问题点 #

• Composable中newList属于冗余代码：MutableStateList本身具备可观察特性，Compose会自动追踪其变化，无需通过LaunchedEffect手动同步，多余的变量反而可能触发不必要的重组。
• LazyColumn的items未指定唯一Key：默认情况下Compose会用列表索引作为项的标识，移除中间项时后续所有项的索引都会改变，导致大量项被强制重组，这是200+项场景下卡顿的核心原因。
• ViewModel中removeItem的索引范围存在风险：(0..10).random()固定了索引范围，当列表长度变化时可能出现越界，应基于当前列表长度动态生成索引。

优化后的代码 #

RemoveItem Composable

@Composable
fun RemoveItem(viewModel: RemovedItemViewModel) {
    LazyColumn {
        // 使用MovieItem本身作为唯一Key（data class已重写equals/hashCode）
        items(items = viewModel.itemList, key = { it }) { item ->
            Text(text = "${item.name} - ${item.number}")
        }
    }
}

RemovedItemViewModel

class RemovedItemViewModel : BaseViewModel() {
    val itemList = mutableStateListOf<MovieItem>()

    init {
        repeat(200) { // 模拟200+项场景
            itemList.add(MovieItem("$it cast", "Movie $it"))
        }
    }

    fun removeItem() {
        if (itemList.isEmpty()) return // 空列表直接返回，避免异常
        val randomIndex = (0 until itemList.size).random()
        itemList.removeAt(randomIndex)
    }
}

MovieItem（无需修改）

data class MovieItem(val number: String, val name: String)

优化核心说明 #

1. 移除冗余状态同步：直接使用viewModel.itemList，依赖MutableStateList的可观察特性让Compose自动响应列表变化，减少不必要的状态流转。
2. 指定唯一Key：给items传入key = { it }（如果MovieItem有独立ID字段，用ID会更稳妥，比如key = { item.id }），Compose会基于Key识别项的身份，移除操作只会销毁被移除的项，后续项仅更新布局位置，不会触发重组，大幅降低UI计算量。
3. 修复索引范围：动态基于itemList.size生成随机索引，避免数组越界异常，适配任意长度的列表。

内容的提问来源于stack exchange，提问作者Compose Learner