Jetpack Compose Academy · Pelajaran

Kunci untuk Daftar Stabil dan Cepat

Bantu Compose melacak item selama perubahan.

Kunci untuk Daftar Stabil dan Cepat adalah pelajaran Jetpack Compose Academy gratis di CoddyKit. Ini adalah pelajaran 3 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Jetpack Compose Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Jetpack Compose Academy mencakup 4 pelajaran total.

Bagian dari pelajaran ini belum diterjemahkan dan ditampilkan dalam bahasa Inggris.

How Compose Tracks Rows

By default, Compose identifies each row by its position in the list. Item zero is item zero, item one is item one, and so on.

Position Breaks on Change

When you insert or remove a row, every item below shifts position. Compose now thinks those rows are different and rebuilds them needlessly.

The Cost of Confusion

Rebuilt rows lose their state and animations. A removed item can make the whole list flicker as Compose reshuffles everything below it.

Give Each Item a Key

A key is a stable, unique value that names each item by identity, not position. Then Compose follows items even as they move.

items(users, key = { it.id }) { user ->
    Text(user.name)
}

Use a Real Unique ID

The best key is a true unique id from your data, like a database id. It stays the same no matter where the item sits.

Keys Must Be Unique

Every key in the list must be different. Duplicate keys throw a runtime error, so never key items by a value two rows might share.

Don't Key by Index

Using the index as a key defeats the purpose, since indexes shift just like position. Reach for it only when you truly have no id.

State Stays With the Item

With stable keys, a row's remembered state travels with it. A checkbox stays checked even after items above it are deleted.

Keys Power Animations

Stable keys let Compose animate items moving, appearing, or leaving. Without them, it can't tell a move from a rebuild.

items(items, key = { it.id }) { item ->
    Text(item.label, Modifier.animateItem())
}

itemsIndexed Takes Keys Too

The itemsIndexed builder also accepts a key lambda. You still get the index, plus stable identity for every row.

itemsIndexed(data, key = { _, item -> item.id }) { i, item ->
    Text("$i: ${item.name}")
}

Keys Are Almost Always Worth It

For any list that can change, adding keys is a tiny effort with a big payoff: correct state, smooth animations, and fewer rebuilds.

Quick Check

What makes a good list key?

Recap: Stable Keys, Stable Lists

Keys give items identity beyond position. Use a real unique id, keep keys unique, and your state and animations just work. ✨

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Kunci untuk Daftar Stabil dan Cepat” gratis?

Ya — teks lengkap “Kunci untuk Daftar Stabil dan Cepat” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Jetpack Compose Academy, upgrade ke CoddyKit PRO. Kursus Jetpack Compose Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Kunci untuk Daftar Stabil dan Cepat”?

Bantu Compose melacak item selama perubahan. Kamu berlatih Jetpack Compose Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai Jetpack Compose Academy?

Tidak diperlukan pengalaman sebelumnya. Jetpack Compose Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 3 dari 4.

Berapa lama pelajaran “Kunci untuk Daftar Stabil dan Cepat” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran Jetpack Compose Academy ini?

Ya. Setiap pelajaran Jetpack Compose Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

← Kembali ke Jetpack Compose Academy