Android Academy · Pelajaran

Mengurus Keadaan Borang

Simpan dan kemas kini nilai medan dengan keadaan.

Pelajaran 2 daripada 413 langkah

Mengurus Keadaan Borang ialah pelajaran Android Academy percuma di CoddyKit. Ini ialah pelajaran 2 daripada 4. Sebanyak 3 pelajaran dalam laluan pembelajaran ini boleh dibaca sepenuhnya secara percuma — selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan praktikal dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran Android Academy, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus Android Academy merangkumi sejumlah 4 pelajaran.

Daripada Satu Medan kepada Borang

Satu medan teks mudah. Borang sebenar mempunyai beberapa medan: nama, e-mel, kata laluan dan mungkin kotak pilihan. Dalam pelajaran ini, Anda akan belajar cara yang kemas untuk menyimpan dan mengemas kini keadaan keseluruhan borang dalam Jetpack Compose.

Jika dilakukan dengan betul, pengesahan, penghantaran dan pratonton semuanya menjadi mudah.

Beberapa Keadaan Bebas

Pendekatan paling mudah ialah menggunakan satu mutableStateOf bagi setiap medan. Setiap medan membaca dan mengemas kini bahagian keadaannya sendiri.

Pendekatan ini amat sesuai untuk borang kecil yang mempunyai dua atau tiga medan.

@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") })
    }
}

Mengumpulkan Keadaan dalam Kelas Data

Apabila borang semakin besar, banyak pemboleh ubah berasingan boleh menjadi berserabut. Pilihan yang lebih kemas ialah memodelkan keseluruhan borang sebagai satu data class yang tidak boleh diubah.

Anda menyimpan satu bahagian keadaan yang mengandungi objek itu dan mengemas kininya dengan copy().

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

Mengemas Kini dengan copy()

Oleh sebab objek keadaan tidak boleh diubah, Anda tidak pernah mengubahnya di tempat asal. Sebaliknya, Anda mencipta salinan baharu dengan satu medan yang diubah dan menetapkannya semula.

Ini memastikan model keadaan Compose kekal mudah dijangka: objek baharu bermaksud petikan baharu, yang mencetuskan gubahan semula.

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

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

Borang Data-Class Lengkap

Di sini, seluruh borang dikendalikan oleh satu SignUpState. Setiap medan mengemas kini satu sifat melalui copy().

Perhatikan betapa mudahnya membaca nilai seluruh borang pada bila-bila masa: nilainya hanyalah 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 Pilihan dan Suis

Bukan semua input berbentuk teks. Checkbox atau Switch berfungsi dengan cara yang sama: nilai boolean bersama panggilan balik onCheckedChange.

Simpan boolean dalam keadaan borang anda, sama seperti rentetan.

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")
}

Menerbitkan Nilai daripada Keadaan

Satu manfaat besar keadaan daripada satu sumber: anda boleh mengira sesuatu daripadanya tanpa menyimpan pemboleh ubah tambahan. Contohnya, sama ada borang sudah sedia untuk dihantar.

Gunakan derivedStateOf (atau ungkapan ringkas) supaya hasilnya dikemas kini secara automatik apabila borang 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")
}

Mengekalkan Keadaan Merentas Perubahan Konfigurasi

remember mengekalkan keadaan merentas gubahan semula, tetapi keadaan itu hilang apabila berlaku perubahan konfigurasi seperti putaran skrin. Untuk mengekalkan nilai ringkas merentas putaran, gunakan rememberSaveable.

Ia berfungsi terus dengan jenis primitif dan Parcelable.

var email by rememberSaveable { mutableStateOf("") }

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

Menaikkan Keadaan Borang ke ViewModel

Untuk borang yang lebih daripada sekadar borang mudah, simpan keadaan dalam ViewModel. Keadaan ini kekal merentas perubahan konfigurasi dan memastikan logik UI berada di luar komponen boleh gubah.

Komponen boleh gubah membaca keadaan dan meneruskan peristiwa; ViewModel memiliki sumber kebenaran.

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

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

Menyambungkan ViewModel

Dalam komponen boleh gubah, dapatkan ViewModel dan ikat setiap medan kepada keadaan serta pengendalinya. UI kekal ringkas dan mudah diuji.

Inilah struktur yang disyorkan untuk borang produksi.

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

Kotlin Tulen: <code>copy()</code> dalam Tindakan

Pola kemas kini copy() hanyalah tingkah laku standard kelas data Kotlin. Di sini, pola itu dijalankan secara kendiri supaya anda dapat melihat bagaimana setiap kemas kini menghasilkan objek baharu sepenuhnya.

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)
}

Semakan Pantas

Anda memodelkan borang sebagai data class tidak berubah yang disimpan dalam keadaan. Bagaimanakah anda patut mengemas kini satu medan?

Jawab dalam pelajaran interaktif

Ringkasan

Anda telah mempelajari cara mengurus keadaan untuk seluruh borang:

Borang kecil: satu mutableStateOf bagi setiap medan.
Borang besar: satu data class tidak berubah yang dikemas kini dengan copy().
Boolean mengawal Checkbox dan Switch dengan cara yang sama seperti teks mengawal medan.
Terbitkan nilai seperti "boleh dihantar" dan bukannya menyimpannya.
Gunakan rememberSaveable untuk putaran, dan ViewModel untuk skrin sebenar.

Seterusnya: mengesahkan input itu dan memaparkan ralat yang membantu.

Percuma untuk bermula

Pelajari Kotlin dengan tutor kecerdasan buatan — percuma

Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.

Kursus: 36
Pelajaran: 152

Mula belajar secara percuma Lihat kursus penuh

Soalan Lazim

Adakah pelajaran “Mengurus Keadaan Borang” percuma?

Ya — sebanyak 3 pelajaran dalam laluan pembelajaran Android Academy, termasuk “Mengurus Keadaan Borang”, boleh dibaca sepenuhnya secara percuma di web ini. Selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan interaktif dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Kursus Android Academy merangkumi sejumlah 4 pelajaran.

Apakah yang akan saya pelajari dalam “Mengurus Keadaan Borang”?

Simpan dan kemas kini nilai medan dengan keadaan. Anda berlatih Android Academy menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.

Adakah saya memerlukan pengalaman untuk memulakan Android Academy?

Tiada pengalaman terdahulu diperlukan. Pembelajaran Android Academy di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 2 daripada 4.

Berapa lamakah pelajaran “Mengurus Keadaan Borang” diambil?

Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.

Bolehkah saya menulis dan menjalankan kod dalam pelajaran Android Academy ini?

Ya. Setiap pelajaran Android Academy menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.

Semua pelajaran dalam kursus ini

← Kembali ke Android Academy