State Aktif, Nonaktif & Memuat
Tunjukkan ketersediaan pada button Anda.
State Aktif, Nonaktif & Memuat 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.
Tombol Memiliki Kondisi
Tombol yang baik mencerminkan keadaan sebenarnya: siap, terhalang, atau sedang bekerja. Compose memungkinkan Anda menampilkan state ini agar pengguna selalu tahu apa yang dapat dilakukan. 🚦
Parameter enabled
Setiap tombol menerima penanda enabled. Atur ke false agar tombol menjadi abu-abu dan otomatis mengabaikan ketukan.
Button(
onClick = { submit() },
enabled = false
) { Text("Submit") }Kendalikan enabled dari State
Kekuatan sebenarnya terletak pada menghubungkan enabled ke state. Hubungkan dengan validasi agar tombol hanya aktif ketika input siap.
Button(
onClick = { submit() },
enabled = name.isNotBlank()
) { Text("Submit") }Dinonaktifkan Berarti Terhalang
Tombol yang dinonaktifkan tetap ditampilkan sehingga pengguna melihat bahwa tindakan tersebut tersedia. Tampilannya yang pudar menandakan mengapa belum bisa tanpa pesan kesalahan.
Tampilkan Kemajuan Saat Bekerja
Untuk tindakan yang lambat, tampilkan state pemuatan. Lacak nilai boolean dan ganti label dengan pemutar saat pekerjaan berlangsung.
var loading by remember { mutableStateOf(false) }Nonaktifkan Selama Pemuatan
Selama memuat, atur enabled = !loading agar pengguna tidak dapat mengetuk dua kali dan menjalankan tindakan yang sama dua kali.
Button(
onClick = { loading = true },
enabled = !loading
) { Text("Save") }Ganti dengan Pemutar
Di dalam konten, gunakan kondisi berdasarkan penanda tersebut: tampilkan CircularProgressIndicator kecil saat loading, dan tampilkan label jika tidak.
Button(onClick = { }, enabled = !loading) {
if (loading) CircularProgressIndicator(Modifier.size(18.dp))
else Text("Save")
}Perkecil Ukuran Pemutar
Pemutar bawaan berukuran besar. Batasi ukurannya dengan Modifier.size agar pas di tempat label sebelumnya.
CircularProgressIndicator(
modifier = Modifier.size(18.dp),
strokeWidth = 2.dp
)Atur Ulang Setelah Selesai
Setelah pekerjaan selesai, atur kembali loading ke false. Label akan muncul lagi dan tombol dapat diketuk kembali.
onResult = { loading = false }State Mencegah Kesalahan
Bersama-sama, enabled dan loading melindungi tindakan Anda: tidak ada ketukan sebelum input valid dan tidak ada ketukan ganda saat pekerjaan sedang berlangsung.
Komunikasikan, Jangan Sembunyikan
Lebih baik menonaktifkan daripada menyembunyikan tombol. Kontrol yang terlihat tetapi dinonaktifkan mengajarkan pengguna cara membukanya.
Pemeriksaan Singkat
Tindakan penyimpanan Anda memerlukan waktu dua detik dan pengguna terus mengetuknya dua kali.
Ringkasan: Tombol Berbasis State
Anda belajar mencerminkan keadaan sebenarnya: enabled membatasi tindakan berdasarkan validitas, sedangkan penanda loading menunjukkan kemajuan dan mencegah pengulangan. Tombol yang jujur, pengguna yang senang. 🎯
Belajar Kotlin dengan tutor AI — gratis
Tulis dan jalankan kode asli di browser kamu, dapatkan bantuan instan dari tutor AI 24/7, dan lanjutkan di mana kamu tinggalkan di web atau aplikasi.
- Kursus
- 30
- Pelajaran
- 120
Pertanyaan yang Sering Diajukan
Apakah pelajaran “State Aktif, Nonaktif & Memuat” gratis?
Ya — teks lengkap “State Aktif, Nonaktif & Memuat” 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 “State Aktif, Nonaktif & Memuat”?
Tunjukkan ketersediaan pada button Anda. 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 “State Aktif, Nonaktif & Memuat” 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
- Button dan onClick
- Button Text, Outlined & Icon
- State Aktif, Nonaktif & Memuat
- clickable pada Composable Apa Pun