如何在向LazyList顶部添加新项时避免自动滚动？

问题背景 #

LazyColumn顶部固定显示加载项，点击按钮往列表开头添加分组数据时，列表会自动滚动到最顶端。要求保留从上到下的添加逻辑（不能用反向布局），实现加载项被新增内容自然替换，用户可平滑滚动到顶部，而非强制跳转。尝试过修改加载项的key但无效，推测由LazyListState.updateScrollPositionIfTheFirstItemWasMoved的默认行为导致。

解决方案 #

核心是动态控制加载项的显示，并确保分组数据顺序正确：

• 仅当列表为空时显示加载项，有数据时自动隐藏
• 对分组的key进行排序，保证新添加的分组始终显示在列表顶部
• 利用LazyColumn的key机制，让系统正确识别item的变化，避免误触发滚动调整

修改后的完整代码 #

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            ListScrollTestTheme {
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colorScheme.background
                ) {
                    ListTest()
                }
            }
        }
    }
}

@OptIn(ExperimentalFoundationApi::class)
@Composable
fun ListTest(viewModel: ListViewModel = viewModel()) {
    Column {
        val grouped = viewModel.state.collectAsState(emptyMap()).value
        val listState = rememberLazyListState()
        
        LazyColumn(
            state = listState,
            modifier = Modifier.weight(1f),
            verticalArrangement = Arrangement.spacedBy(4.dp)
        ) {
            // 仅当列表为空时显示加载项
            if (grouped.isEmpty()) {
                item(key = "loading") {
                    Label("loading")
                }
            }
            
            // 对分组key降序排序，确保新添加的分组（如Y）显示在旧分组（如Z）上方
            grouped.keys.sortedDescending().forEach { key ->
                stickyHeader(key = key) {
                    Header(name = key.toString(), Modifier.animateItemPlacement())
                }
                val list = grouped[key] ?: emptyList()
                items(list, key = { it }) {
                    Label(name = it, Modifier.animateItemPlacement())
                }
            }
        }
        Button(onClick = {
            viewModel.onClick()
        }) {
            Text("add more to top")
        }
    }
}

@Composable
fun Header(name: String, modifier: Modifier = Modifier) {
    Text(
        text = "$name!",
        modifier = modifier
            .fillMaxWidth()
            .background(Color.Gray)
            .padding(8.dp)
    )
}

@Composable
fun Label(name: String, modifier: Modifier = Modifier) {
    Text(
        text = "$name!",
        modifier = modifier
            .padding(4.dp)
            .fillMaxWidth()
            .background(Color.LightGray),
        textAlign = TextAlign.Center
    )
}

class ListViewModel : ViewModel() {
    val alphabet = ('A'..'Z').toList()
    var index = alphabet.lastIndex
    val data = MutableStateFlow(listOf<String>())
    val state: Flow<Map<Char, List<String>>> = data.map {
        it.groupBy { it[0] }
    }

    fun onClick() {
        if (index < 0) return
        val letter = alphabet[index].toString()
        val newItems = (0..19).map {
            letter + it.toString()
        }
        index--
        data.update { newItems + it }
    }
}

关键修改说明 #

1. 动态加载项：移除固定的加载项，改为仅在grouped为空时渲染，避免加载项被新数据挤到下方触发系统滚动逻辑
2. 分组排序：对grouped.keys进行 sortedDescending()排序，确保新添加的字母分组（如Y）始终显示在旧分组（如Z）的上方，符合从上到下添加的需求
3. 保留动画：继续使用animateItemPlacement()保证item添加时的平滑过渡效果

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