0Pricing
Jetpack Compose Academy · Ders

İstatistik Satırı ve Takip Düğmesi

Karta etkileşimli ayrıntılar ekleyin.

İstatistik Satırı ve Takip Düğmesi, CoddyKit'te ücretsiz bir Jetpack Compose Academy dersidir. Bu, 4 dersinin 3. 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.

Add the Interactive Details

With the header done, you will add the lower half: a row of stats and a follow button that responds to taps. This is where the card comes alive. ⚡

One Stat Block

Each stat is two stacked Texts: a big number and a small label. A tiny Column holds them together as one neat block.

Column(horizontalAlignment = Alignment.CenterHorizontally) {
    Text("128")
    Text("Posts")
}

Emphasize the Number

The count should pop while the label stays quiet. Give the number a bold style and the label a smaller one.

Text("128", style = MaterialTheme.typography.titleMedium)
Text("Posts", style = MaterialTheme.typography.labelSmall)

Put Stats in a Row

Three stat blocks sit side by side, so wrap them in a Row. Each block becomes a child laid out left to right.

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

Space the Stats Evenly

Spread the blocks across the card with Arrangement.SpaceEvenly on the Row, so the gaps are equal and balanced.

Row(
    modifier = Modifier.fillMaxWidth(),
    horizontalArrangement = Arrangement.SpaceEvenly
) { /* ... */ }

Add the Follow Button

Below the stats, add a Button. Its onClick lambda runs your code the moment the user taps it.

Button(onClick = { /* follow */ }) {
    Text("Follow")
}

Make It Full Width

A primary action button reads best across the whole card. Add fillMaxWidth so it spans edge to edge.

Button(
    onClick = { /* follow */ },
    modifier = Modifier.fillMaxWidth()
) { Text("Follow") }

Track the Follow State

The button should toggle between Follow and Following. Hold that with remember and mutableStateOf so the UI reacts to taps.

var following by remember { mutableStateOf(false) }

Flip State on Tap

Inside onClick, flip the boolean. Compose notices the state changed and redraws the button with new text automatically.

Button(onClick = { following = !following }) {
    Text(if (following) "Following" else "Follow")
}

Wire It Into the Card

Drop the stats Row and the Button below the header inside the outer Column. The full card now reads top to bottom in order.

An Interactive Card

You now have stats, a follow button, and live state. Tapping really changes the screen, which is the heart of a declarative Compose UI. 🎉

Quick Check

What lets the button text update when tapped?

Recap: Stats and Action

You built a Row of evenly spaced stat blocks and a full-width follow button driven by remembered state. Next you will refactor it all into clean, reusable pieces.

Sıkça Sorulan Sorular

“İstatistik Satırı ve Takip Düğmesi” dersi ücretsiz mi?

Evet — “İstatistik Satırı ve Takip Düğmesi” 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.

“İstatistik Satırı ve Takip Düğmesi” dersinde ne öğreneceğim?

Karta etkileşimli ayrıntılar ekleyin. 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 3. dersidir.

“İstatistik Satırı ve Takip Düğmesi” 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