Jetpack Compose Academy · Pelajaran

Mengangkat State dengan value & onValueChange

Teruskan state ke bawah dan event ke atas.

Pelajaran 2 dari 413 langkah

Mengangkat State dengan value & onValueChange adalah pelajaran Jetpack Compose Academy gratis di CoddyKit. Ini adalah pelajaran 2 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.

Pengangkatan State dalam Satu Kalimat

Pengangkatan state berarti memindahkan state keluar dari Composable ke pemanggilnya. Komponen menjadi stateless dan induknya tetap memegang kendali.

Pola Inti

Ganti state internal dengan dua parameter: value untuk ditampilkan dan panggilan balik onValueChange untuk melaporkan perubahan.

fun NameField(value: String, onValueChange: (String) -> Unit) {
  TextField(value = value, onValueChange = onValueChange)
}

State Turun, Peristiwa Naik

Data mengalir ke bawah melalui value; tindakan pengguna mengalir ke atas melalui onValueChange. Putaran satu arah ini disebut aliran data searah. ↕️

Siapa yang Memiliki State Sekarang

Induk memiliki state menggunakan remember dan meneruskannya. Anak tidak pernah menyimpannya, sehingga dua pemanggil dapat mengendalikan komponen yang sama dengan cara berbeda.

var name by remember { mutableStateOf("") }
NameField(value = name, onValueChange = { name = it })

value: Sisi Baca

Parameter value adalah hal yang sedang ditampilkan komponen. Bagi anak, parameter ini hanya dapat dibaca; anak tidak pernah mengubahnya secara langsung.

onValueChange: Sisi Tulis

Saat pengguna mengetik, anak memanggil onValueChange(newText). Induk menentukan apakah dan bagaimana state-nya diperbarui.

Mengapa Tidak Mengubahnya di Tempat

Anak stateless tidak dapat begitu saja menetapkan ulang value karena value hanya merupakan masukan. Melaporkan perubahan ke atas membuat satu pemilik tetap memegang kendali.

Komponen Terkendali

Ini adalah komponen terkendali: induk sepenuhnya menentukan apa yang ditampilkan. Anda dapat mengubah, mengabaikan, atau memvalidasi masukan sebelum menyimpannya.

NameField(value = name, onValueChange = { name = it.uppercase() })

Menggunakan Kembali Kolom yang Sama

Karena kolom ini diangkat, Anda dapat memasukkannya ke layar masuk, bilah pencarian, atau halaman pengaturan, masing-masing dengan state pemiliknya sendiri.

Pengangkatan Selain Teks

Pola ini cocok untuk state apa pun: Boolean yang dicentang dengan onCheckedChange, item yang dipilih dengan onSelect. Idenya sama, namanya berbeda.

fun ToggleRow(checked: Boolean, onCheckedChange: (Boolean) -> Unit) {
  Switch(checked = checked, onCheckedChange = onCheckedChange)
}

Aturan Sederhana

Angkat state ke induk bersama terendah yang perlu membaca atau mengubahnya, jangan lebih tinggi. Dengan begitu, kepemilikan tetap jelas dan kode tetap rapi.

Pemeriksaan Singkat

Dalam pola pengangkatan, apa yang dilakukan anak saat pengguna mengetik?

Rangkuman

Pengangkatan mengganti state internal dengan value dan onValueChange. State mengalir ke bawah, peristiwa mengalir ke atas, dan induk tetap memegang kendali. 🚀

Gratis untuk memulai

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 “Mengangkat State dengan value & onValueChange” gratis?

Ya — teks lengkap “Mengangkat State dengan value & onValueChange” 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 “Mengangkat State dengan value & onValueChange”?

Teruskan state ke bawah dan event ke atas. 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 2 dari 4.

Berapa lama pelajaran “Mengangkat State dengan value & onValueChange” 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

  1. Composable Stateful vs Stateless
  2. Mengangkat State dengan value & onValueChange
  3. Satu Sumber Kebenaran
  4. Slot State Compose & Lambda Konten
← Kembali ke Jetpack Compose Academy