Android Jetpack Compose – Durum Yönetimi: Statefull VS Stateless

Jetpack Compose üzerinde Durumlu ve Durumsuz belirtme eylemi nasıl gerçekleştirebileceğimiz konusuna değiniyoruz.

Jetpack Compose’da State nedir ?

Durum, verilerimizin tutabileceği bir nesnedir. Veri değişiklikleri olursa, abone olunan tüm UI widget'larını güncelleyecektir. Widget'larınızdaki verileri çalışma zamanında güncellemek istiyorsanız, durum nesnesini kullanabilirsiniz.

Statefull vs Stateless

State<T>

Salt okunur bir değer tutan bir tür: Değer değiştiğinde kompozisyonu bilgilendirir.

MutableState<T>

Bu State genişletme fonksiyonudur. Değeri güncellememizi sağlamaktadır.value özelliği yazıldığında ve değiştirildiğinde, abone olunan tüm RecomposeScopes‘ların yeniden birleştirilmesi planlanacaktır.Değere (value) aynı değerle yazılırsa, hiçbir yerden düzenleme sağlanmaz.

Örneğin:

var secilenIndis by mutableStateOf(0)
//secilenIndis = 5

State olmadan

Nesneyi state (durum) olmadan oluşturursak, verileriniz değiştiğinde UI’ı güncellemez.

@Composable
fun NoState() {
    var tiklamaSayisi = 0
    Column {
        Button(onClick = {
            tiklamaSayisi++
            Log.d("TAG", "NoState: "+tiklamaSayisi)
        }) {
            Text(text = ""+tiklamaSayisi+" defa tıklandı")
        }
    }
}

Çıktı:

Butona bastığımızda onClick olayı tetikleniyor ama sayıyı güncellemiyor. Ancak logcat’i görürseniz, bu değişkenin değeri her tıklama için artmış olacaktır.

State ile

@SuppressLint("UnrememberedMutableState")
@Composable
fun WithState() {
    var tiklamaSayisi by mutableStateOf(0)
    Column {
        Button(onClick = { tiklamaSayisi++ }) {
            Text(text = "" + tiklamaSayisi + " defa tıklandı")
        }
    }
}

Çıktı:

Beklendiği gibi çalışacaktır.
Ancak bazı problemleri var, eğer bu state objesini child composable ile denerseniz çalışmayacaktır.

Bu kodu kullandığınızda Android Studio bir uyarı verir ve remember ile birlikte kullanılması önerilir.

Remember

Remember anahtar sözcüğü, değişebilir veya değişmez bir nesneyi saklayabilir. Değer değişirse, widget’ları güncellemek için yeniden oluşturmayı (kullanıcı arayüzünü yenileyin) tetikleyecektir.

Syntax

val suankiDeger = remember { mutableStateOf(0) } //Int
val kullaniciAdi = remember { mutableStateOf("") } //String

Örnek

@Composable
fun RememberOrnegi() {
    var tiklamaSayisi by remember { mutableStateOf(0) }
    Column {
        Button(onClick = { tiklamaSayisi++ }) {
            Text(text = "" + tiklamaSayisi + " times clicked")
        }
    }
}

Remember child composable ile de çalışır. Argümanı child composable fonksiyona da iletebilirsiniz.

Drawback

Eğer cihazınızın yönü(orientation) değiştirilirse, değer sıfırlanır.
Yeniden oluşturulan activity/orientation değişikliği olsa bile verileri tutmak istiyorsanız, “rememberSaveable” öğesini kullanın.

Remember Saveable

Bir activity veya process recreate oluşturulduktan sonra UI durumunuzu geri yüklemek için RememberSaveable’ı kullanın. RememberSaveable, durumu yeniden oluşturmalar(recreate) arasında korur. Ayrıca, RememberSaveable, activity ve process yeniden oluşturma genelinde durumu korur.

@Composable
fun RememberSaveableOrnegi() {
    var tiklamaSayisi = rememberSaveable { mutableStateOf(0) }
    Column {
        Button(onClick = { tiklamaSayisi.value++ }) {
            Text(text = "" + tiklamaSayisi.value + " defa tıklandı")
        }
    }
}