Jetpack Compose Academy · Ders

Column: Öğeleri Dikey Olarak Sıralama

Alt öğeleri yukarıdan aşağıya yerleştirin.

Column: Öğeleri Dikey Olarak Sıralama, CoddyKit'te ücretsiz bir Jetpack Compose Academy dersidir. Bu, 4 dersinin 1. 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.

Stacking Vertically

When you want children to sit top to bottom, you reach for Column. It is Compose's go-to layout for vertical stacks. 📚

Your First Column

A Column takes a trailing lambda. Every Composable you call inside it becomes a child, drawn in the order you write them.

Column {
    Text("First")
    Text("Second")
}

Order Is Top to Bottom

Children stack in source order. The first Composable sits at the top, the next below it, and so on down the screen.

Mixing Different Children

A Column can hold any Composables, not just Text. Buttons, Images, and even other Columns all stack happily inside it.

Column {
    Text("Title")
    Button(onClick = {}) { Text("Go") }
}

Default Sizing: Wrap Content

By default a Column is only as tall and wide as its children need. It shrinks to wrap its content unless you tell it otherwise.

Filling the Width

Add a Modifier to change size. fillMaxWidth makes the Column stretch across the whole screen horizontally.

Column(modifier = Modifier.fillMaxWidth()) {
    Text("Wide column")
}

Spacing Between Children

Use verticalArrangement with spacedBy to put even gaps between every child. No manual padding on each item needed.

Column(verticalArrangement = Arrangement.spacedBy(8.dp)) {
    Text("A")
    Text("B")
}

Aligning Children Sideways

Set horizontalAlignment to line children up. CenterHorizontally pulls them all to the middle of the Column's width.

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

Columns Don't Scroll Yet

A plain Column does not scroll. If children run past the screen they get clipped, so it suits short, fixed lists best.

Adding Scroll When Needed

For longer content, attach verticalScroll to the Column's modifier. Now the whole stack scrolls as one piece.

Column(modifier = Modifier.verticalScroll(rememberScrollState())) {
    Text("Long content")
}

Nesting for Real Screens

Real screens nest Columns inside Columns. An outer Column holds sections, and each section is its own little Column of details.

Quick Check

Let's confirm how a Column arranges its children.

Recap: Column

You learned Column: it stacks children top to bottom in order, wraps content by default, and uses arrangement, alignment, and modifiers to size and space them.

Sıkça Sorulan Sorular

“Column: Öğeleri Dikey Olarak Sıralama” dersi ücretsiz mi?

Evet — “Column: Öğeleri Dikey Olarak Sıralama” 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.

“Column: Öğeleri Dikey Olarak Sıralama” dersinde ne öğreneceğim?

Alt öğeleri yukarıdan aşağıya yerleştirin. 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 1. dersidir.

“Column: Öğeleri Dikey Olarak Sıralama” 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

← Jetpack Compose Academy Sayfasına Dön