Compose LazyColumn：顶部添加项时保持现有可见项位置不变

要实现点击头部添加新项时，现有可见ListItem位置固定、新项被推到顶部的效果，核心是通过LazyListState精准控制滚动偏移，以下是两种适配不同场景的实现方案：

方案一：适配任意高度的ListItem #

这种方法通过跟踪第一个可见ListItem的位置，在列表更新后强制让它回到原位置，不管ListItem高度是否固定都能用：

fun List(viewModel: ViewModel = viewModel()) {
    val uiState by viewModel.uiState.collectAsState()
    val listState = rememberLazyListState()

    // 实时获取当前第一个可见的ListItem的布局信息
    val firstVisibleItem = remember {
        derivedStateOf {
            listState.layoutInfo.visibleItemsInfo
                .firstOrNull { itemInfo ->
                    uiState.listItems.any { it.getKey() == itemInfo.key }
                }
        }
    }

    // 列表数据更新时，调整滚动位置
    LaunchedEffect(uiState.listItems) {
        firstVisibleItem.value?.let { targetItem ->
            val targetIndex = uiState.listItems.indexOfFirst { it.getKey() == targetItem.key }
            if (targetIndex != -1) {
                // 滚动到目标Item，保持它原来的偏移量，视觉上位置完全不变
                listState.scrollToItem(
                    index = targetIndex,
                    scrollOffset = targetItem.offset
                )
            }
        }
    }

    LazyColumn(state = listState) {
        item {
            AddMoreHeader(onClick = { viewModel.headerClick() }) // 点击往列表顶部加项
        }
        items(items = uiState.listItems, key = { item -> item.getKey() }) { listItem ->
            ListItem(listItem)
        }
        item {
            AddMoreFooter(onClick = { viewModel.footerClick() }) // 点击往列表底部加项
        }
    }
}

关键逻辑说明 #

• rememberLazyListState：保存列表的滚动和布局状态，避免重组时丢失数据。
• derivedStateOf：监听列表布局变化，提取第一个可见ListItem的key和屏幕偏移量。
• LaunchedEffect：列表数据更新后，找到目标ListItem在新列表中的索引，调用scrollToItem并传入原偏移量，强制让它停在原来的位置，新添加的项会被顶到列表上方。

方案二：适配固定高度的ListItem #

如果你的ListItem高度是固定值，用这种方法更高效，直接通过计算新增项的总高度来调整滚动：

fun List(viewModel: ViewModel = viewModel()) {
    val uiState by viewModel.uiState.collectAsState()
    val listState = rememberLazyListState()
    val density = LocalDensity.current
    // 保存上一次的列表长度，用来计算新增项数量
    var previousListSize by rememberSaveable { mutableStateOf(uiState.listItems.size) }

    LaunchedEffect(uiState.listItems.size) {
        val addedCount = uiState.listItems.size - previousListSize
        if (addedCount > 0) {
            // 假设每个ListItem高度为80.dp，转换成像素值
            val totalAddedHeight = with(density) { addedCount * 80.dp.toPx() }
            // 滚动对应高度，抵消新增项带来的顶部偏移
            listState.scrollBy(totalAddedHeight)
        }
        previousListSize = uiState.listItems.size
    }

    LazyColumn(state = listState) {
        item {
            AddMoreHeader(onClick = { viewModel.headerClick() })
        }
        items(items = uiState.listItems, key = { item -> item.getKey() }) { listItem ->
            ListItem(listItem)
        }
        item {
            AddMoreFooter(onClick = { viewModel.footerClick() })
        }
    }
}

关键逻辑说明 #

• 通过对比前后列表的长度，计算新增项的数量。
• 用固定高度乘以数量得到总偏移量，调用scrollBy让列表向下滚动对应距离，现有可见项的位置就不会被顶动。

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