Compose跨组件更新LazyListState：避免不必要重组的方案

不需要将LazyListState提升到根组件，通过ViewModel传递滚动触发信号即可实现需求，同时避免不必要的重组。

步骤1：在ViewModel中添加滚动触发信号 #

在你的LogViewModel中添加一个SharedFlow，用于发送滚动到顶部的指令，当搜索查询变化时触发这个信号：

import kotlinx.coroutines.flow.MutableSharedFlow
import kotlinx.coroutines.flow.asSharedFlow
import kotlinx.coroutines.launch

class LogViewModel : ViewModel() {
    // 保留你现有其他代码...

    private val _scrollToTop = MutableSharedFlow<Unit>(replay = 0)
    val scrollToTop = _scrollToTop.asSharedFlow()

    // 处理搜索查询变化的方法（替换你现有搜索逻辑）
    fun onSearchQueryChanged(query: String) {
        // 执行你的列表过滤逻辑，更新messagesStateFlow...
        
        // 发送滚动到顶部的指令
        viewModelScope.launch {
            _scrollToTop.emit(Unit)
        }
    }
}

步骤2：在MessagesList中监听滚动信号并执行滚动 #

在MessagesList组件中，使用LaunchedEffect监听ViewModel中的scrollToTop流，当收到信号时调用滚动方法：

@Composable
fun MessagesList(viewModel: LogViewModel) {
    val messages = viewModel.messagesStateFlow.collectAsState()
    val state = rememberLazyListState()

    // 监听滚动指令，触发时滚动到列表顶部
    LaunchedEffect(key1 = viewModel.scrollToTop) {
        viewModel.scrollToTop.collect {
            state.animateScrollToItem(index = 0)
            // 不需要动画的话，改用state.scrollToItem(0)
        }
    }

    Box(modifier = Modifier.fillMaxSize()){
        LazyColumn(state = state) {
            items(messages.value.size) { index ->
                val message = messages.value[index]
                MessageRow(message.message)
            }
        }

        VerticalScrollbar(
            modifier = Modifier.align(Alignment.CenterEnd).fillMaxHeight().padding(end = 4.dp),
            adapter = rememberScrollbarAdapter(state),
            style = ScrollbarStyle(
                minimalHeight = 32.dp,
                thickness = 8.dp,
                shape = RoundedCornerShape(8.dp),
                hoverDurationMillis = 300,
                unhoverColor = MaterialTheme.colorScheme.primary.copy(alpha = 0.50f),
                hoverColor = MaterialTheme.colorScheme.primary
            )
        )
    }
}

步骤3：修改根组件的SearchBar回调 #

在根组件的SearchBar中，调用ViewModel的onSearchQueryChanged方法，将搜索查询传递过去：

SearchBar(viewModel) { query ->
    viewModel.onSearchQueryChanged(query)
}

方案优势 #

• 无需提升LazyListState到根组件，避免根组件及其他无关Composable因滚动状态变化而重组。
• 滚动逻辑完全封装在MessagesList组件内部，ViewModel仅负责传递触发信号，符合单一职责原则。
• 通过SharedFlow实现事件驱动，确保每次搜索变化都能准确触发滚动，且不会出现重复触发问题。

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