Android Jetpack Compose：如何高效更新LazyColumn中的单行？

一、实现单行精准更新 #

核心思路是单独维护每行的展开状态，避免修改整个列表集合，让Compose只重组状态变化的行。

1. ViewModel中独立管理展开状态 #

在ViewModel里用MutableStateMap记录每个列表项的展开状态，key用列表项的唯一标识（比如你的countryName+group），value是是否展开：

class FlagViewModel : ViewModel() {
    // 原始列表数据设为不可变，避免触发全列表重组
    val flags = mutableStateListOf<FlagData>().apply {
        // 初始化数据
    }

    // 单独维护展开状态，仅更新需要变化的项
    private val _expandedStates = mutableStateMapOf<String, Boolean>()
    val expandedStates: Map<String, Boolean> = _expandedStates

    fun toggleRowExpansion(key: String) {
        _expandedStates[key] = !_expandedStates.getOrDefault(key, false)
    }
}

2. LazyColumn中绑定状态并优化重组 #

在LazyColumn的item中，通过唯一key获取对应行的展开状态，点击时仅更新该行的状态。同时确保itemsIndexed的key是稳定唯一的，避免Compose错误复用item：

LazyColumn(modifier) {
    itemsIndexed(flags, key = { _, flagData -> "${flagData.countryName}:${flagData.group}" }) { _, flagData ->
        val itemKey = "${flagData.countryName}:${flagData.group}"
        val isExpanded = viewModel.expandedStates.getOrDefault(itemKey, false)
        
        RenderFlagRow(
            flagData = flagData,
            isExpanded = isExpanded,
            onRowClicked = { viewModel.toggleRowExpansion(itemKey) }
        )
        HorizontalDivider(modifier = Modifier.fillMaxWidth(), thickness = 2.dp, color = Color.LightGray)
    }
}

3. RenderFlagRow根据状态展示内容 #

在子Composable中仅根据isExpanded控制额外文本的显示，其他内容（比如图片、基础文本）不会因为状态变化而重复绘制：

@Composable
fun RenderFlagRow(
    flagData: FlagData,
    isExpanded: Boolean,
    onRowClicked: () -> Unit
) {
    Column(
        modifier = Modifier
            .fillMaxWidth()
            .clickable { onRowClicked() }
            .padding(16.dp)
    ) {
        Row(verticalAlignment = Alignment.CenterVertically) {
            FlagImage(imageResId = flagData.imageResId)
            Text(text = flagData.countryName, modifier = Modifier.padding(start = 12.dp))
        }
        // 仅当展开状态变化时，这部分才会重组
        if (isExpanded) {
            Text(text = flagData.extraText, modifier = Modifier.padding(top = 8.dp))
        }
    }
}

二、缓存Painter避免重复重建 #

1. 本地资源图片：用remember缓存Painter #

对于本地drawable资源，用remember包裹painterResource，确保只有当资源ID变化时才重新创建Painter：

@Composable
fun FlagImage(imageResId: Int) {
    // 用imageResId作为remember的key，缓存Painter实例
    val painter = remember(imageResId) {
        painterResource(id = imageResId)
    }
    Image(
        painter = painter,
        contentDescription = "Flag of ${flagData.countryName}",
        modifier = Modifier.size(48.dp)
    )
}

2. 网络图片：用Coil自动缓存 #

如果是网络图片，使用Coil的AsyncImage，它会自动处理内存和磁盘缓存，避免重复加载和Painter重建：

// 先添加Coil依赖到build.gradle
// implementation("io.coil-kt:coil-compose:2.4.0")

@Composable
fun FlagImage(imageUrl: String) {
    AsyncImage(
        model = imageUrl,
        contentDescription = null,
        modifier = Modifier.size(48.dp),
        placeholder = painterResource(R.drawable.placeholder_flag)
    )
}

三、关键注意点 #

• 原始列表数据保持不可变：ViewModel中的flags尽量用State<List<FlagData>>或mutableStateListOf（仅初始化时修改），不要直接修改列表元素，避免触发全列表重组。
• 确保key的唯一性：itemsIndexed的key必须能唯一标识每个列表项，否则Compose可能会错误复用item的状态和布局，导致异常。

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