Flow.debounce – entprellte Live-Suche in Jetpack Compose

Tippt jemand „Berlin" in dein Suchfeld, sind das schnell sechs API-Anfragen. Auf einem Flow löst debounce das Problem elegant: Es lässt einen Wert erst durch, wenn eine bestimmte Zeit lang kein neuer nachkommt. Kombiniert mit flatMapLatest bricht eine noch laufende Suche automatisch ab, sobald der Nutzer weitertippt.

Der Query-Flow im ViewModel

import kotlinx.coroutines.FlowPreview
import kotlinx.coroutines.flow.*

class SearchViewModel(private val repo: SearchRepository) : ViewModel() {
    private val query = MutableStateFlow("")

    fun onQueryChange(text: String) { query.value = text }

    @OptIn(FlowPreview::class)
    val results: StateFlow<List<Hit>> = query
        .debounce(300)                       // erst nach 300 ms Ruhe weiter
        .map { it.trim() }
        .distinctUntilChanged()              // gleicher Text? nicht neu suchen
        .filter { it.length >= 2 }
        .flatMapLatest { q -> repo.search(q) } // neue Eingabe bricht alte Suche ab
        .stateIn(viewModelScope, SharingStarted.WhileSubscribed(5000), emptyList())
}

Anbinden in Compose

@Composable
fun SearchScreen(vm: SearchViewModel) {
    val text by vm.query.collectAsStateWithLifecycle()   // falls query öffentlich
    val hits by vm.results.collectAsStateWithLifecycle()
    OutlinedTextField(value = text, onValueChange = vm::onQueryChange, label = { Text("Suche") })
    LazyColumn { items(hits) { hit -> Text(hit.title) } }
}

Jetzt läuft pro Tipp-Pause genau eine Suche, und veraltete Ergebnisse können dir nicht mehr dazwischenfunken. debounce ist noch als @FlowPreview markiert – deshalb das @OptIn.

Solche reaktiven Suchen baue ich regelmäßig in Android-Apps ein. Wenn du eine App in Kotlin & Compose planst, melde dich über bymw.de.

Quellen

• debounce – kotlinx.coroutines
• flatMapLatest – kotlinx.coroutines