如何通过Item Key而非索引滚动到Jetpack Compose LazyColumn指定项

我构建了一个模拟卡片的复杂LazyColumn Composable，因为嵌套LazyColumn会触发“Vertically scrollable component was measured with an infinity maximum height contraints”问题，所以采用了如下数据结构：

data class CardsState(val cards: ImmutableList<Card>)

data class Card(
    val header: String,
    val items: ImmutableList<CardItem>,
)

在LazyColumn中，绘制一个CardItem需要用到多个LazyListScope.item，目前运行正常，但需要实现滚动到特定CardItem的功能。可惜LazyListState.animateScrollToItem(index: Int)只接收索引参数，计算目标项对应的LazyColumn索引非常繁琐。

我希望通过Item Key实现滚动，所有LazyColumn项都有唯一Key，相关定义如下：

interface CollectionItem {
    val key: Any?
}

fun CollectionItem.makeKey(): String = buildString {
    append(javaClass.name)
    key?.let { append("_$it") }
}

data class CardsState(
    val cards: ImmutableList<Card>,
    val scrollToItemWithKey: Any?, // 要滚动到的LazyColumn项的Key
)

data class Card(
    val header: String,
    val items: ImmutableList<CardItem>,
) : CollectionItem {
    override val key: String = header
}

sealed class CardItem : CollectionItem {
    data class CardItemTypeA(/* 一些参数 */) : CardItem()
    data class CardItemTypeB(/* 其他参数 */) : CardItem()
}

@Composable
fun MyContent(cardsState: CardsState) {
    val scrollState = rememberLazyListState()
    LazyColumn(state = scrollState) {
        cardsState.cards.forEach { card ->
            item(key = "${card.makeKey()}_top") { Spacer(modifier = Modifier.height(16.dp)) }
            item(key = "${card.makeKey()}_header") { Header(card.header) }
            items(items = card.items, key = { it.makeKey() }) {
                when (it) {
                    is CardItem.CardItemTypeA -> ComposeCardItemTypeA()
                    is CardItem.CardItemTypeB -> ComposeCardItemTypeB()
                }
                item(key = "${card.makeKey()}_bottom") { CardBottomLayout() }
            }
        }
    }
}

但LazyListState并没有提供animateScrollToItem(key: Any)方法。如果通过计算索引实现，会让ViewModel依赖UI层的构建逻辑，后续新增Composable时维护成本极高。请问有没有其他方案可以实现基于Key的滚动？

方案1：抽离纯函数生成全量Key列表，匹配后滚动 #

把UI层的项构建逻辑封装成纯函数，生成所有LazyColumn项的Key列表，通过目标Key找到对应索引后触发滚动，避免ViewModel依赖UI细节：

1. 编写纯函数生成全量Key列表：

fun CardsState.generateAllLazyKeys(): List<String> {
    val keys = mutableListOf<String>()
    cards.forEach { card ->
        keys.add("${card.makeKey()}_top")
        keys.add("${card.makeKey()}_header")
        card.items.forEach { item ->
            keys.add(item.makeKey())
            keys.add("${card.makeKey()}_bottom")
        }
    }
    return keys
}

2. 在Composable中监听目标Key变化，执行滚动：

@Composable
fun MyContent(cardsState: CardsState) {
    val scrollState = rememberLazyListState()
    val coroutineScope = rememberCoroutineScope()

    LaunchedEffect(cardsState.scrollToItemWithKey) {
        cardsState.scrollToItemWithKey?.let { targetKey ->
            val allKeys = cardsState.generateAllLazyKeys()
            val targetIndex = allKeys.indexOfFirst { it == targetKey }
            if (targetIndex != -1) {
                scrollState.animateScrollToItem(targetIndex)
            }
        }
    }

    // 原LazyColumn构建逻辑保持不变
    LazyColumn(state = scrollState) {
        cardsState.cards.forEach { card ->
            item(key = "${card.makeKey()}_top") { Spacer(modifier = Modifier.height(16.dp)) }
            item(key = "${card.makeKey()}_header") { Header(card.header) }
            items(items = card.items, key = { it.makeKey() }) { item ->
                when (item) {
                    is CardItem.CardItemTypeA -> ComposeCardItemTypeA()
                    is CardItem.CardItemTypeB -> ComposeCardItemTypeB()
                }
                item(key = "${card.makeKey()}_bottom") { CardBottomLayout() }
            }
        }
    }
}

后续UI结构修改时，只需要同步更新generateAllLazyKeys函数即可，ViewModel始终只需要传递目标Key。

方案2：封装扩展函数简化滚动逻辑 #

把Key查找和滚动的逻辑封装成LazyListState的扩展函数，让代码更简洁：

suspend fun LazyListState.animateScrollToKey(
    allKeys: List<String>,
    targetKey: String
) {
    val targetIndex = allKeys.indexOfFirst { it == targetKey }
    if (targetIndex != -1) {
        animateScrollToItem(targetIndex)
    }
}

然后在Composable中直接调用：

LaunchedEffect(cardsState.scrollToItemWithKey) {
    cardsState.scrollToItemWithKey?.let { targetKey ->
        scrollState.animateScrollToKey(cardsState.generateAllLazyKeys(), targetKey)
    }
}

方案3：用状态映射缓存Key与索引的对应关系 #

如果数据源频繁变化，可以用mutableStateMapOf维护Key到索引的映射，避免每次滚动都重新生成全量Key列表：

@Composable
fun MyContent(cardsState: CardsState) {
    val scrollState = rememberLazyListState()
    val coroutineScope = rememberCoroutineScope()
    val keyToIndexMap = remember { mutableStateMapOf<String, Int>() }

    // 数据源变化时同步更新映射
    LaunchedEffect(cardsState.cards) {
        keyToIndexMap.clear()
        var currentIndex = 0
        cardsState.cards.forEach { card ->
            keyToIndexMap["${card.makeKey()}_top"] = currentIndex++
            keyToIndexMap["${card.makeKey()}_header"] = currentIndex++
            card.items.forEach { item ->
                keyToIndexMap[item.makeKey()] = currentIndex++
                keyToIndexMap["${card.makeKey()}_bottom"] = currentIndex++
            }
        }
    }

    // 执行滚动逻辑
    LaunchedEffect(cardsState.scrollToItemWithKey) {
        cardsState.scrollToItemWithKey?.let { targetKey ->
            keyToIndexMap[targetKey]?.let { targetIndex ->
                scrollState.animateScrollToItem(targetIndex)
            }
        }
    }

    // 原LazyColumn构建逻辑保持不变
}

这个方案适合频繁更新的数据源，减少重复计算的性能开销。

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