Composable Function: nedir, fonksiyon sözdizimi ve kurallar

Jetpack Compose'ta Composable Function Nedir

Composable Function, @Composable ek açıklamasıyla işaretlenmiş Kotlin dilinde bir işlevdir ve kullanıcı arayüzünün bir bölümünü bildirimsel bir şekilde tanımlar. Java kodu veya XML işaretlemesi aracılığıyla View nesneleri oluşturup yapılandırmak yerine, geliştirici verilerin her durumu için UI'nın nasıl görünmesi gerektiğini basitçe yazar.

Composable işlevi ile geleneksel Android View sistemi arasındaki temel fark, güncelleme modelinde yatmaktadır. Klasik yaklaşımda, geliştirici findViewById'i manuel olarak çağırır, setText aracılığıyla metni değiştirir ve setVisibility aracılığıyla görünürlüğü yönetirdi. Composable Function sizi bu rutinden kurtarır: veriler değiştiğinde, sistem hangi işlevlerin yeniden oluşturulması gerektiğini kendisi belirler ve yalnızca bunları yürütür.

Kotlin derleyicisi, @Composable ek açıklamasını işlerken, işlevi oluşturma mekanizmasına entegre eden ek kod üretir. Bu kod, mevcut UI ağacındaki her Composable işlevinin durumunu ve parametrelerini depolayan özel bellek hücreleri olan slotlara okuma ve yazma işlemlerini içerir. Bu entegrasyon sayesinde Compose, hangi işlevlerin hangi verilere bağlı olduğunu bilir.

Composable İşlev Bildirim Sözdizimi

Composable işlevinin sözdizimi son derece kısadır: fun anahtar sözcüğünden önce @Composable eklemeniz yeterlidir. İşlev herhangi bir parametreyi kabul edebilir, gövdesinde diğer Composable çağrılarını içerebilir ve koşullu UI oluşturma için Kotlin yapılarını (koşullar, döngüler, when ifadeleri) kullanabilir.

@Composable
fun ProductItem(
    product: Product,
    modifier: Modifier = Modifier,
    onAddToCart: () -> Unit
) {
    Card(modifier = modifier.padding(8.dp)) {
        Row(modifier = Modifier.fillMaxWidth().padding(12.dp),
            verticalAlignment = Alignment.CenterVertically) {
            Column(modifier = Modifier.weight(1f)) {
                Text(text = product.name, style = MaterialTheme.typography.titleMedium)
                Text(text = "${product.price}", color = MaterialTheme.colorScheme.primary)
            }
            Button(onClick = onAddToCart) {
                Text("Sepete ekle")
            }
        }
    }
}

Bu örnekte, ProductItem Composable işlevi bir Product nesnesini, bir değiştiriciyi ve bir geri aramayı kabul eder. Üç parametre de değişmezdir, bu da yeniden oluşturma sırasında öngörülebilir davranışı garanti eder. Değiştirici, varsayılan bir değerle parametre olarak iletilir — bu, çağıran tarafın dolgu ve boyutları özelleştirmesine olanak tanıyan standart bir uygulamadır.

Composable İşlevlerde Bileşenler ve Değiştiriciler

Composable işlevinin içinde, yerleşik Material Design bileşenleri (Text, Button, Card, TextField) veya temel ilkeller (Canvas, Layout) kullanılır. Her bileşen, görünüm ve davranışı yapılandırmak için parametrelerin yanı sıra modifier parametresi aracılığıyla bir veya daha fazla değiştirici kabul eder.

Değiştiriciler, bir bileşenin boyutunu, konumunu, olay işlemeyi ve görünümünü değiştiren işlevler zinciridir. Zincirdeki değiştiricilerin sırası önemlidir: clickable.semantics, semantics.clickable'dan farklı çalışır ve padding.background, dolgu dahil hem alanı hem de arka planı boyar ki bu tasarım yaparken kritiktir.

Composable işlevinin içinde, UI bölümlerinin koşullu oluşturulması için if ve when koşullarını ve dinamik listeler için for döngülerini kullanabilirsiniz. Tüm bu yapılar doğal olarak çalışır çünkü Kotlin tam teşekküllü bir programlama dilidir. Ancak, bir koşul veya döngü Composable işlev çağrıları içeriyorsa, bunların da yeniden oluşturmaya katıldığını unutmamak önemlidir.

@Composable
fun ProductList(
    products: List<Product>,
    modifier: Modifier = Modifier
) {
    LazyColumn(modifier = modifier) {
        items(products, key = { it.id }) { product ->
            ProductItem(
                product = product,
                onAddToCart = { /* add to cart */ }
            )
        }
    }
}

Gerçek Ekranlar İçin Composable İşlev Örnekleri

Birden çok Composable işlevi kullanan bir ürün arama ekranı örneğini ele alalım. Burada tipik kalıplar gösterilmektedir: durumlu bir giriş alanı, liste filtreleme, boş sonuçları işleme ve yükleme.

data class Product(
    val id: String,
    val name: String,
    val price: Double,
    val category: String
)

@Composable
fun SearchScreen() {
    var query by remember { mutableStateOf("") }
    val products = remember(query) { getFilteredProducts(query) }

    Column(modifier = Modifier.fillMaxSize().padding(16.dp)) {
        OutlinedTextField(
            value = query,
            onValueChange = { query = it },
            label = { Text("Ürünleri ara") },
            modifier = Modifier.fillMaxWidth()
        )

        Spacer(modifier = Modifier.height(16.dp))

        when (products) {
            is Loading -> CircularProgressIndicator()
            is Empty -> Text("Sonuç bulunamadı")
            is Result -> LazyColumn {
                items(products.items, key = { it.id }) { product ->
                    ProductItem(product = product, onAddToCart = {})
                }
            }
        }
    }
}

Bu örnek, aynı anda birkaç deyimi gösterir: arama sorgusu durumunu korumak için remember, anahtarla filtreleme için remember(query), üç UI durumu için when ve verimli liste oluşturma için LazyColumn. Bu deyimlerin her biri, Compose uygulamaları geliştirmedeki pratik deneyimin sonucudur.

Parametreler ve Slot API

Composable işlevleri, normal Kotlin işlevleri gibi parametreleri kabul eder, ancak önemli bir farkla: bir parametre, @Composable ek açıklamasıyla bir lambda aracılığıyla iletilen başka bir Composable işlevi olabilir. Bu mekanizmaya Slot API denir ve yeniden kullanılabilir kaplar oluşturmanın ana kalıbıdır.

Slot API, geleneksel View sisteminde ViewGroup ve alt View'lerin programatik olarak eklenmesiyle çözülen sorunu çözer. addView yöntemleri yerine Compose, content lambdaları kullanır — @Composable () -> Unit türündeki son parametre. Çağıran, bu lambda'ya herhangi bir UI iletir ve kap yalnızca düzenini tanımlar.

Composable işlev parametreleri varsayılan değerlere sahip olabilir, bu da onların farklı bağlamlarda kullanımını basitleştirir. Önerilen, işlevin görevini yerine getiremeyeceği parametreleri zorunlu kılmak ve geri kalanı için makul varsayılan değerler sağlamaktır.

Kotlin'de Composable İşlev Deyimleri

Compose topluluğunda, Composable işlevlerini daha okunabilir ve öngörülebilir kılan birkaç yerleşik deyim ortaya çıkmıştır. Birincisi State Hoisting'dir: durum daha yüksek bir seviyeye yükseltilir ve Composable işlevi bunu parametreler aracılığıyla alır. Bu, işlevi saf hale getirir ve farklı bağlamlarda yeniden kullanılabilir kılar.

İkinci deyim Event-driven parametreleridir. Composable işlevine ViewModel veya useCase iletmek yerine, yalnızca belirli geri aramalar iletilir: onSave, onDelete, onNavigateToDetail. Bu, bağlantıyı azaltır ve test etmeyi basitleştirir.

Üçüncü deyim, oluşturma ağacı aracılığıyla paylaşılan verileri iletmek için CompositionLocal'dir. Tema, ekran yoğunluğu, mevcut Route — bunların tümü CompositionLocal aracılığıyla iletilir ve onlarca Composable işlevi boyunca parametre zincirlerinden kaçınılır. Ancak, CompositionLocal kötüye kullanılmamalıdır: açık parametreler her zaman örtük bağımlılıklara tercih edilir.

// State Hoisting: durum üst işleve yükseltildi
@Composable
fun CounterDisplay(
    count: Int,
    onIncrement: () -> Unit
) {
    Column(horizontalAlignment = Alignment.CenterHorizontally) {
        Text(text = "Sayaç: $count", style = MaterialTheme.typography.headlineLarge)
        Button(onClick = onIncrement) {
            Text("+1")
        }
    }
}

// State Hoisting ile kullanım
@Composable
fun CounterScreen() {
    var count by remember { mutableStateOf(0) }
    CounterDisplay(
        count = count,
        onIncrement = { count++ }
    )
}