0Pricing
Jetpack Compose Academy · Ders

Yeniden Kullanılabilir Composable'ları Ayırma

Ekranı temiz bileşenlere yeniden düzenleyin.

Yeniden Kullanılabilir Composable'ları Ayırma, CoddyKit'te ücretsiz bir Jetpack Compose Academy dersidir. Bu, 4 dersinin 4. 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, Jetpack Compose Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Jetpack Compose Academy kursu toplamda 4 dersten oluşur.

Bu dersin bazı bölümleri henüz çevrilmemiş olup İngilizce olarak gösterilmektedir.

Time to Refactor

Your card works, but it is one long function. Now you will split it into small, named Composables that are easier to read and reuse. 🧩

Spot Repeated Patterns

The three stat blocks are nearly identical. Repeated shapes like that are a strong signal to extract a single reusable Composable.

Extract StatBlock

Pull one stat into its own function. Pass the differing values, the count and label, in as parameters.

@Composable
fun StatBlock(count: String, label: String) {
    Column { Text(count); Text(label) }
}

Reuse It Three Times

Now the stats Row is just three clean calls. The same StatBlock renders different data each time, with zero duplication.

Row {
    StatBlock("128", "Posts")
    StatBlock("4.2k", "Followers")
    StatBlock("180", "Following")
}

Extract the Header

Group the avatar, name, and bio into a ProfileHeader Composable. The big screen function gets shorter and far easier to scan.

@Composable
fun ProfileHeader(name: String, bio: String) {
    Column { /* avatar, name, bio */ }
}

Name Things Clearly

Good Composable names describe what you see: ProfileHeader, StatBlock, FollowButton. Clear names make the card read like a sentence.

Pass Data In

Keep components flexible by accepting parameters instead of hard-coding values. The same ProfileHeader can show any user.

ProfileHeader(name = "Ada Lovelace", bio = "Building apps.")

Hoist the Click Out

Let the parent decide what a tap does. Expose an onFollowClick lambda parameter so FollowButton stays generic.

@Composable
fun FollowButton(onClick: () -> Unit) {
    Button(onClick = onClick) { Text("Follow") }
}

Assemble the Screen

The top-level ProfileCard now just composes the pieces in order. Each child Composable owns one job, which is the Compose way.

Column {
    ProfileHeader(name, bio)
    StatsRow(stats)
    FollowButton(onFollow)
}

Add a Modifier Parameter

Truly reusable Composables accept a Modifier parameter, defaulting to Modifier. Callers can then size and pad them from outside.

@Composable
fun StatBlock(
    count: String,
    label: String,
    modifier: Modifier = Modifier
) { /* ... */ }

Clean and Reusable

Your one giant function is now several small, focused, reusable Composables. This structure scales as your app grows in complexity. 🎉

Quick Check

What makes a Composable reusable across different data?

Recap: You Shipped a Card

You refactored the profile card into small reusable Composables with parameters and a Modifier slot. You now have a clean, scalable screen built end to end.

Sıkça Sorulan Sorular

“Yeniden Kullanılabilir Composable'ları Ayırma” dersi ücretsiz mi?

Evet — “Yeniden Kullanılabilir Composable'ları Ayırma” 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 Jetpack Compose Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Jetpack Compose Academy kursu toplamda 4 dersten oluşur.

“Yeniden Kullanılabilir Composable'ları Ayırma” dersinde ne öğreneceğim?

Ekranı temiz bileşenlere yeniden düzenleyin. Jetpack Compose 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.

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

Önceden deneyim gerekmez. CoddyKit'te Jetpack Compose 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 4. dersidir.

“Yeniden Kullanılabilir Composable'ları Ayırma” 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 Jetpack Compose Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her Jetpack Compose 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

  1. Profil Kartı Düzeninin Taslağını Oluşturma
  2. Avatar, Ad ve Biyografi Bölümü
  3. İstatistik Satırı ve Takip Düğmesi
  4. Yeniden Kullanılabilir Composable'ları Ayırma
← Jetpack Compose Academy Sayfasına Dön