Android Academy · Ders

Form Durumunu Yönetme

Alan değerlerini durumla saklayıp güncelleyin.

Form Durumunu Yönetme, CoddyKit'te ücretsiz bir Android Academy dersidir. Bu, 4 dersinin 2. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, Android Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Android Academy kursu toplamda 4 dersten oluşur.

Tek Alandan Forma

Tek bir metin alanı kolaydır. Gerçek bir formda birkaç alan bulunur: ad, e-posta, parola ve belki bir onay kutusu. Bu derste Jetpack Compose'ta bir formun tamamının durumunu tutup güncellemenin temiz yollarını öğreneceksiniz.

Bunu doğru yaptığınızda doğrulama, gönderim ve önizlemeler de kolaylaşır.

Birbirinden Bağımsız Birden Çok Durum

En basit yaklaşım, her alan için bir mutableStateOf kullanmaktır. Her alan kendi durum parçasını okur ve günceller.

Bu yaklaşım, iki veya üç alan içeren küçük formlar için tamamen uygundur.

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

Durumu Veri Sınıfında Gruplama

Formlar büyüdükçe çok sayıda dağınık değişken karmaşaya yol açar. Daha temiz bir seçenek, formun tamamını tek bir değişmez data class olarak modellemektir.

Bu nesneyi tutan tek bir durum parçası bulundurur ve nesneyi copy() ile güncellersiniz.

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

copy() ile Güncelleme

Durum nesnesi değişmez olduğu için onu yerinde hiçbir zaman değiştirmezsiniz. Bunun yerine, bir alanı değiştiren yeni bir kopya oluşturup bu kopyayı geri atarsınız.

Bu, Compose'un durum modelini öngörülebilir tutar: yeni bir nesne yeni bir anlık görüntü anlamına gelir ve yeniden oluşturmayı tetikler.

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

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

Tam Bir Veri Sınıfı Formu

Burada formun tamamı tek bir SignUpState tarafından yönetilir. Her alan, copy() aracılığıyla tek bir özelliği günceller.

Formun tamamının değerini herhangi bir anda okumanın ne kadar kolay olduğuna dikkat edin: yalnızca 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") }
    )
}

Onay Kutuları ve Anahtarlar

Her girdi metin değildir. Bir Checkbox veya Switch aynı şekilde çalışır: bir boolean değer ve bir onCheckedChange geri çağırması.

Boolean değeri, bir dizeyi sakladığınız gibi form durumunuzda saklayın.

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

Durumdan Değer Türetme

Tek kaynaklı durumun önemli bir yararı şudur: ek değişkenler saklamadan bu durumdan değerler hesaplayabilirsiniz. Örneğin formun gönderilmeye hazır olup olmadığını.

Sonucun form değiştikçe otomatik olarak güncellenmesi için derivedStateOf (veya basit bir ifade) kullanın.

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

Yapılandırma Değişikliklerinden Sağ Çıkma

remember, yeniden oluşturma işlemleri boyunca durumu korur; ancak ekranın döndürülmesi gibi bir yapılandırma değişikliğinde durum kaybolur. Basit değerleri döndürme sonrasında korumak için rememberSaveable kullanın.

İlk kullanımdan itibaren ilkel türler ve Parcelable türleriyle çalışır.

var email by rememberSaveable { mutableStateOf("") }

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

Form Durumunu ViewModel'e Taşıma

Basit bir formun ötesindeki her şey için durumu bir ViewModel içinde tutun. Bu, yapılandırma değişikliklerinden etkilenmez ve kullanıcı arayüzü mantığını composable dışında tutar.

Composable durumu okur ve olayları iletir; gerçeğin kaynağı ViewModel'dir.

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

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

ViewModel'i Bağlama

Composable içinde ViewModel'i alın ve her alanı kendi durumuna ve işleyicisine bağlayın. Kullanıcı arayüzü yalın ve test edilebilir kalır.

Üretim formları için önerilen yapı budur.

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

Saf Kotlin: copy() İş Başında

copy() güncelleme deseni, standart Kotlin veri sınıfı davranışından ibarettir. Burada bağımsız olarak çalıştırılır; böylece her güncellemenin yepyeni bir nesne oluşturduğunu görebilirsiniz.

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

Hızlı Kontrol

Formunuzu, durumda tutulan değişmez bir data class olarak modelliyorsunuz. Tek bir alanı nasıl güncellemelisiniz?

Özet

Tüm formlar için durumu nasıl yöneteceğinizi öğrendiniz:

Küçük formlar: alan başına bir mutableStateOf.
Büyük formlar: copy() ile güncellenen tek bir değişmez data class.
Boolean değerler, Checkbox ve Switch bileşenlerini metin değerlerinin alanları yönettiği şekilde yönetir.
Değerleri saklamak yerine "gönderilebilir" gibi değerleri türetin.
Döndürme işlemi için rememberSaveable, gerçek ekranlar için bir ViewModel kullanın.

Sırada: bu girdiyi doğrulamak ve yararlı hataları göstermek var.

Sıkça Sorulan Sorular

“Form Durumunu Yönetme” dersi ücretsiz mi?

Evet — “Form Durumunu Yönetme” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve Android Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Android Academy kursu toplamda 4 dersten oluşur.

“Form Durumunu Yönetme” dersinde ne öğreneceğim?

Alan değerlerini durumla saklayıp güncelleyin. Android Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

Android Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te Android Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 2. dersidir.

“Form Durumunu Yönetme” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu Android Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her Android Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

← Android Academy Sayfasına Dön