LazyColumn mit stabilen Keys in Jetpack Compose

LazyColumn ist in Jetpack Compose das, was früher der RecyclerView war: eine Liste, die nur die sichtbaren Einträge zeichnet. Der wichtigste Handgriff für Einsteiger ist der key-Parameter – damit weiß Compose, welcher Eintrag welcher ist, wenn sich die Liste ändert.

Die Liste

data class Task(val id: Long, val title: String, val done: Boolean)

@Composable
fun TaskList(tasks: List<Task>, onToggle: (Long) -> Unit) {
    LazyColumn(
        contentPadding = PaddingValues(16.dp),
        verticalArrangement = Arrangement.spacedBy(8.dp),
    ) {
        items(
            items = tasks,
            key = { task -> task.id },
        ) { task ->
            TaskRow(task = task, onToggle = { onToggle(task.id) })
        }
    }
}

@Composable
private fun TaskRow(task: Task, onToggle: () -> Unit) {
    Row(verticalAlignment = Alignment.CenterVertically) {
        Checkbox(checked = task.done, onCheckedChange = { onToggle() })
        Text(text = task.title)
    }
}

Warum der Key wichtig ist

Ohne key benutzt Compose die Position in der Liste als Identität. Fügst du oben ein Element ein oder sortierst um, denkt Compose, jeder Eintrag hätte sich geändert, und zeichnet unnötig neu. Mit einem stabilen key (hier task.id) erkennt Compose verschobene Einträge wieder – das Scrollverhalten bleibt flüssig und der State pro Zeile geht nicht verloren.

Faustregel: Nimm als Key immer etwas Eindeutiges und Unveränderliches aus deinem Datenmodell – die Datenbank-ID ist ideal, der Listenindex ist es nicht.

Solche flüssigen Listen sind Standard in den Apps, die ich baue. Wenn du eine App mit sauberer, schneller UI brauchst, findest du mich auf bymw.de.

Quellen

• Listen und Grids in Compose (items, key) – Android Developers