android - 每当列表发生变化时，LazyList 都会重新组合项目

Question

我在 ViewModel 中有一个通知列表。

class Notification(
    val id: String,
    val title: String,
    val body: String,
    val time: String,
    isRead: Boolean = false,
) {
    var isRead by mutableStateOf(isRead)
}


class NotificationViewModel : ViewModel() {
    private val _notificationList = mutableStateListOf(
        Notification(
            "ID1",
            "Nice title",
            "Nice description",
            "18.03.2022 11:30"
        ),
        Notification(
            "ID2",
            "Nice title",
            "Nice description",
            "18.03.2022 11:30"
        ),
        Notification(
            "ID3",
            "Nice title",
            "Nice description",
            "18.03.2022 11:30"
        ),
    )

    val notificationList: List<Notification>
        get() = _notificationList


    fun deleteNotification(id: String) {
        val list = _notificationList
        val notification = list.find { id == it.id }

        if (notification != null) {
            list.remove(notification)
        }
    }

    fun setRead(id: String, isRead: Boolean = true) {
        val list = _notificationList
        val notification = list.find { id == it.id }

        if (notification != null) {
            notification.isRead = isRead
        }
    }

    fun setAllRead(isRead: Boolean = true) {
        val list = _notificationList
        if (list.isEmpty()) return
        if (list.none { it.isRead != isRead }) return

        list.forEachIndexed { _, n ->
            n.isRead = isRead
        }
    }
}

我在通知屏幕中使用它，我可以将通知标记为已读并删除它们。

@Composable
fun NotificationScreen(viewModel: NotificationViewModel) {
    val list = viewModel.notificationList

    Surface(modifier = Modifier.fillMaxSize()) {
        LazyColumn {
            item(key = "MarkAsRead") {
                val setAllReadEnabled by remember(list) { derivedStateOf { list.find { !it.isRead } != null } }
                Button(
                    enabled = setAllReadEnabled,
                    onClick = {
                        viewModel.setAllRead()
                    },
                    shape = MaterialTheme.shapes.extraLarge
                ) {
                    Text(
                        text = "Mark everything as read",
                    )
                }
            }
            items(
                items = list,
                key = { it.id }
            ) { item ->
                NotificationCard(
                    title = item.title,
                    body = item.body,
                    time = item.time,
                    isRead = item.isRead,
                    onDismiss = {
                        viewModel.deleteNotification(item.id)
                    },
                    onIconClick = {
                        viewModel.setRead(item.id, true)
                    }
                )
            }
        }
    }
}

问题是，当我从列表中删除一个元素时，LazyColumn 中的所有项目都会重新组合，即使按钮所在的位置也是如此。报告告诉我 Notification、NotificationViewModel 和 NotificationCardColors 是稳定的。 NotificationScreen 和 NotificationCard 是可以跳过的。我不知道为什么会这样，也不知道我做错了什么。

我尝试了所有我能找到的东西，但没有任何效果。另外，我的日历组件几乎存在相同的问题，在选择一天时，日历网格中的每一天都会重新组装。

更新。这是 NotificationCard:

@Composable
fun NotificationCard(
    modifier: Modifier = Modifier,
    title: String,
    body: String,
    time: String,
    isRead: Boolean = false,
    colors: NotificationCardColors = DefaultNotificationCardColors.notificationCardColors(),
    onDismiss: () -> Unit,
    onIconClick: () -> Unit,
) {
    val containerColor by colors.containerColor(isRead)
    val textColor by colors.textColor(isRead)
    val timeColor by colors.timeColor(isRead)

    val swipeableState = rememberSwipeableState(0)
    val width = with(LocalDensity.current) { LocalConfiguration.current.screenWidthDp.dp.toPx() }
    val anchors = mapOf(-width / 2 to -1, 0f to 0, width / 2 to 1)
    val currentValue = swipeableState.currentValue

    LaunchedEffect(key1 = currentValue) {
        when (currentValue) {
            -1, 1 -> onDismiss()
        }
    }

    Surface(
        modifier = modifier
            .swipeable(
                state = swipeableState,
                anchors = anchors,
                thresholds = { _, _ -> FractionalThreshold(0.8f) },
                orientation = Orientation.Horizontal,
            )
            .offset {
                IntOffset(
                    x = swipeableState.offset.value.dp
                        .toPx()
                        .toInt(), y = 0
                )
            },
        color = containerColor,
        contentColor = textColor,
        shape = MaterialTheme.shapes.large,
        shadowElevation = 5.dp,
    ) {
        Column(
            modifier = Modifier
                .padding(12.dp),
            verticalArrangement = spacedBy(12.dp)
        ) {
            Row(
                modifier = Modifier.fillMaxWidth(),
                horizontalArrangement = SpaceBetween,
                verticalAlignment = CenterVertically
            ) {
                Text(
                    text = title,
                    style = MaterialTheme.typography.titleMedium
                )
                Text(
                    text = time,
                    style = MaterialTheme.typography.titleSmall,
                    color = timeColor,
                )
            }
            Row {
                Text(
                    modifier = Modifier.weight(.9f),
                    text = body,
                    style = MaterialTheme.typography.labelMedium,
                    softWrap = true,
                )
                Box(
                    modifier = Modifier.weight(.1f),
                    contentAlignment = Center,
                ) {
                    androidx.compose.animation.AnimatedVisibility(
                        visible = !isRead,
                        enter = Transitions.expandFadeIn(clip = false),
                        exit = Transitions.shrinkFadeOut(clip = false)
                    ) {
                        IconButton(modifier = Modifier.size(24.dp), onClick = onIconClick) {
                            Icon(id = R.drawable.ic_check, tint = timeColor)
                        }
                    }
                }
            }
        }
    }
}

Answer 1

我无法在您的代码中发现任何明显的错误，但您如何确定每一行都在重新组合？您确定不仅仅是内部惰性列表可组合项在重构并且您的通知卡被正确跳过了吗？

在布局检查器中，您正在寻找 NotificationCard(在我的屏幕截图中，我有一行名为 InterestsItem)并查看它是否被跳过。它上面的可组合项是惰性列表的内部组件，当列表更改时，预计会在那里进行重组。