Jetpack Compose中LazyList收藏按钮状态持久化问题

初始选中收藏项与筛选后的状态对比：
{:width="300"}      {:width="300"}

当前实现代码 #

主Compose函数（Column内代码） #

var productList = state.productList
val options = listOf(
    "Menor preço",
    "Maior preço",
    "A-Z",
    "Z-A",
    "Favoritos"
)
var selectedOption by remember {
    mutableStateOf("")
}
val onSelectionChange = { text: String ->
    selectedOption = text
}
Text(text = "Ordenar por")
Spacer(modifier = Modifier)
Row(
    Modifier
        .fillMaxWidth()
        .heightIn(70.dp)
        .horizontalScroll(rememberScrollState())
) {
    options.forEach { text ->
        Row(
            modifier = Modifier
                .padding(all = 8.dp)
        ) {
            Text(
                text = text,
                style = typography.bodySmall.merge(),
                color = OldBurgundy,
                modifier = Modifier
                    .clip(
                        shape = RoundedCornerShape(
                            size = 12.dp,
                        ),
                    )
                    .clickable {
                        onSelectionChange(text)
                    }
                    .background(
                        if (text == selectedOption) {
                            DarkCoral
                        } else {
                            DeepPeach
                        }
                    )
                    .padding(
                        vertical = 12.dp,
                        horizontal = 16.dp,
                    ),
            )
        }
    }
}
when (selectedOption) {
    "Menor preço" -> {
        productList = productList?.sortedBy { it.price?.toFloat() }
    }

    "Maior preço" -> {
        productList = productList?.sortedByDescending { it.price?.toFloat() }
    }

    "A-Z" -> {
        productList = productList?.sortedBy { it.brand }
    }

    "Z-A" -> {
        productList = productList?.sortedByDescending { it.brand }
    }

    else -> {}
}
LazyColumn(
    Modifier
        .fillMaxSize(),
    verticalArrangement = Arrangement.spacedBy(16.dp)
) {
    if (productList != null) {
        for (product in productList) {
            item {
                CardProductItem(product)
            }
        }
    }
}

卡片项Compose函数 #

@Composable
fun CardProductItem(
    product: ProductListItem,
    modifier: Modifier = Modifier,
    elevation: Dp = 4.dp
) {
    Card(
        modifier
            .fillMaxWidth()
            .heightIn(100.dp),
        elevation = CardDefaults.cardElevation(
            defaultElevation = elevation
        )
    ) {
        Column(
            Modifier
                .fillMaxWidth()
                .background(DeepPeach)
                .padding(16.dp)
        ) {
            Row {
                Text(text = "Marca: ", fontWeight = FontWeight.Bold)
                Text(
                    text = product.brand ?: "marca indisponivel",
                    color = WengeGray
                )
                Spacer(
                    Modifier
                        .weight(1f)
                        .fillMaxHeight())
                FavoriteButton(
                    productIsFavorite = product.isFavorite,
                    onFavoriteClicked = {
                        product.isFavorite = it
                    }
                )
            }
            Row {
                Text(text = "Preço: ", fontWeight = FontWeight.Bold)
                Text(
                    text = product.price ?: "preço indisponivel",
                    color = WengeGray
                )
            }
            Row {
                Text(
                    buildAnnotatedString {
                        withStyle(style = SpanStyle(fontWeight = FontWeight.Bold)) {
                            append("Descrição: ")
                        }
                        withStyle(style = SpanStyle(color = WengeGray)) {
                            append(product.description ?: "descrição indisponivel")
                        }
                    }
                )
            }
        }
    }
}

收藏按钮函数 #

@Composable
fun FavoriteButton(
    modifier: Modifier = Modifier,
    color: Color = Color(0xffE91E63),
    productIsFavorite: Boolean,
    onFavoriteClicked: (favorite: Boolean) -> Unit
) {

    var isFavorite by rememberSaveable { mutableStateOf(productIsFavorite) }

    IconToggleButton(
        checked = isFavorite,
        onCheckedChange = {
            isFavorite = !isFavorite
            onFavoriteClicked(isFavorite)
        }
    ) {
        Icon(
            tint = color,
            modifier = modifier.graphicsLayer {
                scaleX = 1.3f
                scaleY = 1.3f
            },
            imageVector = if (isFavorite) {
                Icons.Filled.Favorite
            } else {
                Icons.Default.FavoriteBorder
            },
            contentDescription = null
        )
    }

}

问题原因与解决办法 #

核心问题 #

1. LazyList组件复用错误：默认以索引为Item的key，排序后索引对应的商品变化，但组件会复用之前的状态，导致收藏状态和商品不匹配。
2. 本地状态冗余：FavoriteButton内用rememberSaveable保存的isFavorite脱离了商品对象的数据源，排序后没有同步最新的商品状态。
3. 数据修改无重组触发：直接修改product.isFavorite = it无法触发Compose重组，因为普通数据类的属性变化不会通知状态更新。

修复步骤 #

1. 给LazyList Item设置唯一Key

这是最直接的修复，让Compose基于商品唯一标识（比如ID）识别Item，避免排序后复用错误组件：

// 修改LazyColumn中的item代码
LazyColumn(...) {
    productList?.forEach { product ->
        // 用商品的唯一ID作为key
        item(key = product.id) {
            CardProductItem(product)
        }
    }
}

2. 让商品的收藏状态可观察

将ProductListItem的isFavorite改为MutableState，确保属性变化能触发UI重组：

// 修改ProductListItem类
data class ProductListItem(
    val id: String, // 必须有唯一ID
    val brand: String?,
    val price: String?,
    val description: String?,
    val isFavorite: MutableState<Boolean> = mutableStateOf(false)
)

3. 移除按钮的本地状态，直接绑定商品数据源

不需要在按钮里单独存状态，直接读取和修改商品对象的isFavorite：

@Composable
fun FavoriteButton(
    modifier: Modifier = Modifier,
    color: Color = Color(0xffE91E63),
    product: ProductListItem
) {
    IconToggleButton(
        checked = product.isFavorite.value,
        onCheckedChange = {
            product.isFavorite.value = it
        }
    ) {
        Icon(
            tint = color,
            modifier = modifier.graphicsLayer {
                scaleX = 1.3f
                scaleY = 1.3f
            },
            imageVector = if (product.isFavorite.value) {
                Icons.Filled.Favorite
            } else {
                Icons.Default.FavoriteBorder
            },
            contentDescription = "切换收藏状态"
        )
    }
}

4. 更新卡片组件的按钮调用

// 在CardProductItem中修改按钮调用
FavoriteButton(product = product)

5. 优化列表排序逻辑

确保排序后的列表引用原商品对象（而非创建新对象），保留原有的收藏状态：

// 用remember缓存排序后的列表，避免重复计算
val sortedProductList = remember(selectedOption) {
    productList?.let { list ->
        when(selectedOption) {
            "Menor preço" -> list.sortedBy { it.price?.toFloat() }
            "Maior preço" -> list.sortedByDescending { it.price?.toFloat() }
            "A-Z" -> list.sortedBy { it.brand }
            "Z-A" -> list.sortedByDescending { it.brand }
            else -> list
        }
    }
}

// LazyColumn使用sortedProductList
LazyColumn(...) {
    sortedProductList?.forEach { product ->
        item(key = product.id) {
            CardProductItem(product)
        }
    }
}

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