Android Academy · Pelajaran

Mengelola Status Formulir

Simpan dan perbarui nilai bidang menggunakan status.

Pelajaran 2 dari 413 langkah

Mengelola Status Formulir adalah pelajaran Android 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 Android Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Android Academy mencakup 4 pelajaran total.

Dari Satu Kolom Menjadi Formulir

Satu kolom teks mudah dikelola. Formulir nyata memiliki beberapa kolom: nama, email, kata sandi, mungkin juga kotak centang. Dalam pelajaran ini, Anda akan mempelajari cara yang rapi untuk menyimpan dan memperbarui status seluruh formulir dalam Jetpack Compose.

Jika dilakukan dengan benar, validasi, pengiriman, dan pratinjau menjadi mudah.

Beberapa Status Independen

Pendekatan paling sederhana adalah menggunakan satu mutableStateOf untuk setiap kolom. Setiap kolom membaca dan memperbarui bagian statusnya sendiri.

Ini sangat sesuai untuk formulir kecil dengan dua atau tiga kolom.

@Composable
fun LoginForm() {
    var email by remember { mutableStateOf("") }
    var password by remember { mutableStateOf("") }

    Column {
        OutlinedTextField(email, { email = it }, label = { Text("Email") })
        OutlinedTextField(password, { password = it }, label = { Text("Password") })
    }
}

Mengelompokkan Status dalam Kelas Data

Saat formulir berkembang, banyak variabel yang terpisah dapat menjadi berantakan. Pilihan yang lebih rapi adalah memodelkan seluruh formulir sebagai satu data class yang tidak dapat diubah.

Anda menyimpan satu bagian status yang memuat objek tersebut dan memperbaruinya dengan copy().

data class SignUpState(
    val name: String = "",
    val email: String = "",
    val agreedToTerms: Boolean = false
)

Memperbarui dengan copy()

Karena objek status tidak dapat diubah, Anda tidak pernah memodifikasinya langsung. Sebagai gantinya, buat salinan baru dengan satu kolom yang diubah, lalu tetapkan kembali.

Hal ini menjaga model status Compose tetap mudah diprediksi: objek baru berarti snapshot baru yang memicu komposisi ulang.

var form by remember { mutableStateOf(SignUpState()) }

OutlinedTextField(
    value = form.name,
    onValueChange = { form = form.copy(name = it) },
    label = { Text("Name") }
)

Form Data-Class Lengkap

Di sini, seluruh form digerakkan oleh satu SignUpState. Setiap kolom memperbarui satu properti melalui copy().

Perhatikan betapa mudahnya membaca nilai seluruh form kapan saja: cukup gunakan form.

var form by remember { mutableStateOf(SignUpState()) }

Column {
    OutlinedTextField(
        value = form.name,
        onValueChange = { form = form.copy(name = it) },
        label = { Text("Name") }
    )
    OutlinedTextField(
        value = form.email,
        onValueChange = { form = form.copy(email = it) },
        label = { Text("Email") }
    )
}

Kotak Centang dan Sakelar

Tidak semua input berupa teks. Checkbox atau Switch bekerja dengan cara yang sama: nilai boolean dan callback onCheckedChange.

Simpan nilai boolean dalam state form seperti halnya string.

var form by remember { mutableStateOf(SignUpState()) }

Row(verticalAlignment = Alignment.CenterVertically) {
    Checkbox(
        checked = form.agreedToTerms,
        onCheckedChange = { form = form.copy(agreedToTerms = it) }
    )
    Text("I agree to the terms")
}

Menurunkan Nilai dari State

Salah satu manfaat besar dari state dengan satu sumber kebenaran adalah Anda dapat menghitung berbagai hal darinya tanpa menyimpan variabel tambahan. Misalnya, apakah form siap dikirim.

Gunakan derivedStateOf (atau ekspresi sederhana) agar hasilnya diperbarui secara otomatis saat form berubah.

var form by remember { mutableStateOf(SignUpState()) }

val canSubmit by remember {
    derivedStateOf {
        form.name.isNotBlank() &&
        form.email.isNotBlank() &&
        form.agreedToTerms
    }
}

Button(onClick = { /* submit */ }, enabled = canSubmit) {
    Text("Sign Up")
}

Mempertahankan State Saat Konfigurasi Berubah

remember mempertahankan state selama rekomposisi, tetapi state tersebut hilang saat terjadi perubahan konfigurasi seperti rotasi layar. Untuk mempertahankan nilai sederhana saat rotasi, gunakan rememberSaveable.

Secara bawaan, fitur ini berfungsi untuk tipe primitif dan tipe Parcelable.

var email by rememberSaveable { mutableStateOf("") }

OutlinedTextField(
    value = email,
    onValueChange = { email = it },
    label = { Text("Email") }
)

Mengangkat State Form ke ViewModel

Untuk form yang lebih dari sekadar form sederhana, simpan state di dalam ViewModel. State ini bertahan saat konfigurasi berubah dan menjaga logika UI tetap berada di luar composable.

Composable membaca state dan meneruskan peristiwa; ViewModel menjadi pemilik sumber kebenaran.

class SignUpViewModel : ViewModel() {
    var state by mutableStateOf(SignUpState())
        private set

    fun onNameChange(value: String) {
        state = state.copy(name = value)
    }
}

Menghubungkan ViewModel

Di dalam composable, ambil ViewModel dan hubungkan setiap kolom dengan state serta penanganannya. UI tetap sederhana dan mudah diuji.

Inilah struktur yang direkomendasikan untuk form produksi.

@Composable
fun SignUpScreen(vm: SignUpViewModel = viewModel()) {
    OutlinedTextField(
        value = vm.state.name,
        onValueChange = vm::onNameChange,
        label = { Text("Name") }
    )
}

Kotlin Murni: copy() dalam Aksi

Pola pembaruan copy() hanyalah perilaku standar data-class Kotlin. Di sini, pola tersebut dijalankan secara mandiri agar Anda dapat melihat bagaimana setiap pembaruan menghasilkan objek baru.

data class SignUpState(
    val name: String = "",
    val email: String = ""
)

fun main() {
    var state = SignUpState()
    state = state.copy(name = "Ada")
    state = state.copy(email = "ada@dev.io")
    println(state)
}

Pemeriksaan Singkat

Anda memodelkan form sebagai data class yang tidak dapat diubah dan disimpan dalam state. Bagaimana cara memperbarui satu kolom?

Jawab di pelajaran interaktif

Ringkasan

Anda telah mempelajari cara mengelola state untuk seluruh form:

Form kecil: satu mutableStateOf untuk setiap kolom.
Form yang lebih besar: satu data class yang tidak dapat diubah, diperbarui dengan copy().
Boolean menggerakkan Checkbox dan Switch dengan cara yang sama seperti teks menggerakkan kolom.
Turunkan nilai seperti "dapat dikirim" daripada menyimpannya.
Gunakan rememberSaveable untuk rotasi, dan ViewModel untuk layar nyata.

Berikutnya: memvalidasi input dan menampilkan error yang membantu.

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: 36
Pelajaran: 152

Mulai belajar gratis Lihat kursus lengkapnya

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Mengelola Status Formulir” gratis?

Ya — teks lengkap “Mengelola Status Formulir” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Android Academy, upgrade ke CoddyKit PRO. Kursus Android Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Mengelola Status Formulir”?

Simpan dan perbarui nilai bidang menggunakan status. Kamu berlatih Android 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 Android Academy?

Tidak diperlukan pengalaman sebelumnya. Android 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 “Mengelola Status Formulir” 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 Android Academy ini?

Ya. Setiap pelajaran Android 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 Android Academy