MWCodebymw.de ↗
Kotlin

snapshotFlow in Jetpack Compose – aus Compose-Zustand einen Flow machen

Manchmal willst du auf einen Compose-Zustand reagieren wie auf einen Datenstrom – entprellen, kombinieren, sammeln. Genau das macht snapshotFlow. Ich zeige dir das an der häufigsten Aufgabe: mehr laden, wenn der Nutzer ans Listenende scrollt.

In Compose ist Zustand kein Flow. LazyListState, ein TextFieldState, ein remember-Wert – das sind Snapshot-States, die eine Recomposition auslösen, wenn sie sich ändern. Für die UI ist das perfekt. Aber manchmal will ich auf so einen Wert reagieren wie auf einen Datenstrom: entprellen, mit etwas anderem kombinieren, einmalig eine Aktion auslösen.

Dafür gibt es snapshotFlow. Es liest in seinem Block einen oder mehrere Snapshot-States und macht daraus einen kalten Flow, der genau dann einen neuen Wert ausgibt, wenn sich das gelesene Ergebnis ändert.

Das häufigste Beispiel: Nachladen, wenn der Nutzer ans Ende der Liste scrollt.

@Composable
fun Feed(items: List<Post>, onLoadMore: () -> Unit) {
    val listState = rememberLazyListState()

    // Läuft an die Lebensdauer des Composables gebunden – LaunchedEffect ist Pflicht.
    LaunchedEffect(listState) {
        snapshotFlow {
            // liest den Scroll-Zustand: Index des letzten sichtbaren Elements
            listState.layoutInfo.visibleItemsInfo.lastOrNull()?.index
        }
            .distinctUntilChanged()          // nur bei echter Änderung, nicht bei jedem Pixel
            .collect { lastVisible ->
                if (lastVisible != null && lastVisible >= items.size - 3) {
                    onLoadMore()             // 3 Elemente vor Schluss nachladen
                }
            }
    }

    LazyColumn(state = listState) {
        items(items, key = { it.id }) { post -> PostRow(post) }
    }
}

Ohne snapshotFlow müsste ich den Index in jeder Recomposition von Hand vergleichen und mir merken, ob ich schon nachgeladen habe. Mit dem Flow bekomme ich distinctUntilChanged, debounce, filter und combine geschenkt – die ganze Werkzeugkiste von Kotlin Flow.

Drei Dinge, die ich mir gemerkt habe:

  • Immer in einem LaunchedEffect (oder einer Coroutine) sammeln. snapshotFlow allein tut nichts – erst das collect startet die Beobachtung, und die soll an die Lebensdauer des Composables gebunden sein.
  • Der Block wird neu ausgewertet, sobald sich ein darin gelesener State ändert. Halte ihn klein und gib nur das zurück, worauf du wirklich reagieren willst – sonst feuert der Flow öfter als nötig.
  • distinctUntilChanged fast immer dazu. Der Scroll-Index ändert sich beim Wischen ständig; du willst nur die echten Wechsel.

Genauso reagiere ich auf ein Suchfeld: snapshotFlow { query }.debounce(300).collect { suche(it) } – eine entprellte Live-Suche in zwei Zeilen. Für abgeleiteten Anzeigewert innerhalb der Recomposition nimm dagegen derivedStateOf; snapshotFlow ist für Seiteneffekte außerhalb, die auf Zustand reagieren.

Solche Details entscheiden, ob sich eine App flüssig anfühlt oder ruckelt – und genau daran arbeite ich, wenn ich Android-Apps in Kotlin und Jetpack Compose baue. Mehr dazu auf bymw.de.

Quellen

Du brauchst mehr als ein Snippet?

Ich entwickle Android-Apps in Kotlin und moderne Websites für Selbstständige und kleine Unternehmen — von der ersten Idee bis zum Release.

Projekt anfragen →