Jetpack Compose：如何让StateFlow响应搜索查询变更？

问题根源 #

你当前的servicesUiState在ViewModel初始化时仅执行了一次offlineServiceRepository.search(searchQuery.value)，后续searchQuery更新时，这个Flow不会重新触发搜索——因为它没有监听searchQuery的变化，仅捕获了初始值。

修复ViewModel代码 #

将searchQuery改为MutableStateFlow，并用flatMapLatest操作符监听查询变化，每次查询更新时触发新的搜索请求：

class ServicesViewModel(
    private val offlineServiceRepository: ServiceRepository
) : ViewModel() {

    // 替换mutableStateOf为MutableStateFlow，支持Flow操作监听变化
    private val searchQuery = MutableStateFlow("")

    val servicesUiState: StateFlow<ServicesUiState> = searchQuery
        // 每次查询更新时，重新执行搜索并切换到新的Flow
        .flatMapLatest { query ->
            offlineServiceRepository.search(query)
                .map { ServicesUiState.Success(it) }
                // 可选：捕获异常并转为Error状态
                .catch { emit(ServicesUiState.Error) }
        }
        .stateIn(
            scope = viewModelScope,
            started = SharingStarted.WhileSubscribed(TIMEOUT_MILLIS),
            initialValue = ServicesUiState.Loading
        )

    fun updateSearchQuery(query: String) {
        searchQuery.value = query
        Log.i("SEARCHVALUE", "SQ: ${searchQuery.value}")
    }
}

优化屏幕组件代码 #

当前ScreenServices每次重组都会调用viewModel.updateSearchQuery(searchBarValue)，会导致不必要的重复调用。用LaunchedEffect包裹，仅当searchBarValue变化时才更新查询：

@Composable
fun ScreenServices(
    viewModel: ServicesViewModel,
    retryAction: () -> Unit,
    navigateToPreCall: (service: Service) -> Unit,
    searchBarValue: String,
    modifier: Modifier = Modifier
) {

    val servicesUiState by viewModel.servicesUiState.collectAsState()

    // 仅在searchBarValue变化时触发查询更新
    LaunchedEffect(searchBarValue) {
        viewModel.updateSearchQuery(searchBarValue)
    }

    when (servicesUiState) {
        is ServicesUiState.Loading -> LoadingScreen(modifier)
        is ServicesUiState.Success -> ServicesList((servicesUiState as ServicesUiState.Success).services, navigateToPreCall, modifier)
        is ServicesUiState.Error -> ErrorScreen(retryAction, modifier)
    }
}

补充说明 #

• flatMapLatest会在新查询到来时取消未完成的旧搜索请求，避免旧结果覆盖新结果，非常适合搜索场景。
• 若offlineServiceRepository.search返回的是挂起函数而非Flow，需要用flow { emit(offlineServiceRepository.search(query)) }包裹后再进行后续操作。

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