Column: penempatan vertikal dan konfigurasi wadah di Compose

Apa itu Column di Jetpack Compose

Column — adalah fungsi Composable yang menerima parameter opsional: modifier, verticalArrangement, horizontalAlignment dan content — lambda dengan ColumnScope. Di dalam Column, fungsi Composable anak ditempatkan dari atas ke bawah sesuai urutan deklarasi. Tinggi Column sama dengan jumlah tinggi elemen anak ditambah ruang yang ditentukan oleh Arrangement. Lebar — berdasarkan lebar maksimum elemen anak dengan mempertimbangkan Alignment.

Column adalah wadah tak terlihat: tidak memiliki latar belakang atau batas sendiri secara default. Jika diperlukan latar belakang — tambahkan Modifier.background() ke Column itu sendiri. Tidak seperti LazyColumn, Column menampilkan semua elemen anak secara bersamaan dan tidak mendukung virtualisasi. Ini berarti Column hanya cocok untuk kumpulan data kecil — hingga 10-15 elemen. Untuk daftar panjang gunakan LazyColumn.

ColumnScope — adalah receiver untuk lambda content dari Column. Ini menyediakan pengubah tambahan yang hanya berfungsi di dalam Column: weight(), align(), alignByBaseline(). Pengubah ini tidak berarti di luar Column karena mereka bergantung pada spesifik penempatan vertikal. Misalnya, Modifier.align(Alignment.CenterHorizontally) meratakan elemen anak ke tengah Column secara horizontal.

Parameter Column: Arrangement, Alignment, Modifier

VerticalArrangement menentukan bagaimana ruang vertikal didistribusikan antar elemen. Nilai yang tersedia: Arrangement.Top (default), Bottom, Center, SpaceBetween, SpaceEvenly, SpaceAround. Jika tinggi Column lebih besar dari jumlah tinggi elemen, Arrangement mendistribusikan ruang kosong. Jika elemen menempati seluruh tinggi — Arrangement tidak berpengaruh.

HorizontalAlignment mengatur perataan horizontal setiap elemen anak. Alignment.Start (default, LTR), CenterHorizontally, End. Alignment bekerja pada setiap elemen secara independen: jika satu elemen sempit dan lainnya lebar — yang pertama akan rata, yang kedua mungkin melampaui batas Column. Alignment hanya berfungsi jika Column memiliki lebar tetap atau fillMaxWidth.

Modifier untuk Column: Column menerima Modifier yang diterapkan ke wadah itu sendiri. Modifier.fillMaxWidth(), fillMaxHeight(), size(), padding() — semua pengubah standar berfungsi. Keistimewaan: Modifier.height(IntrinsicSize.Min) memaksa Column menghitung tinggi minimum berdasarkan elemen anak dengan mempertimbangkan Intrinsic measurement.

@Composable
fun ColumnArrangementDemo() {
    Column(
        modifier = Modifier.fillMaxSize().background(Color(0xFFF5F5F5)),
        verticalArrangement = Arrangement.SpaceEvenly,
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        Text("Atas", modifier = Modifier.background(Color.Cyan))
        Text("Tengah", modifier = Modifier.background(Color.Magenta))
        Text("Bawah", modifier = Modifier.background(Color.Yellow))
    }
}

    // IntrinsicSize: Column menyesuaikan tinggi dengan konten
@Composable
fun IntrinsicColumn() {
    Column(
        modifier = Modifier
            .height(IntrinsicSize.Min)
            .width(200.dp)
    ) {
        Text("Teks pendek")
        Text("Teks yang sangat panjang yang akan membungkus di dalam kolom")
    }
}

Column weight: distribusi ruang antar elemen

Modifier.weight() — adalah pengubah ColumnScope yang mendistribusikan ruang vertikal kosong antar elemen Column secara proporsional berdasarkan bobot yang ditentukan. Jika Column menempati tinggi 400dp dan elemen anak total 100dp, maka sisa 300dp dibagi antara elemen weight. Elemen dengan weight(2f) mendapat ruang dua kali lebih banyak dari elemen dengan weight(1f).

fill — parameter kedua weight: weight(weight: Float, fill: Boolean = true). Jika fill = true (default), elemen meregang ke seluruh tinggi yang tersedia. Jika fill = false — elemen hanya menempati tinggi intrinsiknya, ruang sisanya tetap kosong. Ini berguna ketika elemen harus menempel ke satu sisi, tetapi weight hanya menentukan proporsi distribusi ruang kosong.

Batasan weight: weight hanya berfungsi di Column dengan tinggi tetap atau fillMaxHeight(). Jika tinggi Column ditentukan oleh elemen anak (wrap content), bobot tidak berarti — tidak ada ruang kosong untuk didistribusikan. Juga weight tidak dapat dikombinasikan dengan Modifier.height() pada elemen yang sama — mereka konflik, dan weight diabaikan.

@Composable
fun WeightedColumn() {
    Column(
        modifier = Modifier.fillMaxHeight().width(300.dp)
    ) {
        // Mengambil 1/6 dari tinggi (bobot 1 dari jumlah 1+2+3=6)
        Box(
            modifier = Modifier
                .weight(1f)
                .fillMaxWidth()
                .background(Color.Red)
        )
        // Mengambil 2/6 dari tinggi
        Box(
            modifier = Modifier
                .weight(2f)
                .fillMaxWidth()
                .background(Color.Green)
        )
        // Mengambil 3/6 dari tinggi
        Box(
            modifier = Modifier
                .weight(3f)
                .fillMaxWidth()
                .background(Color.Blue)
        )
    }
}

Column vs LazyColumn: kapan menggunakan apa

Column menampilkan semua elemen anak sekaligus. Jika elemen lebih dari 10-15, Column menciptakan beban signifikan pada komposisi dan pengukuran. LazyColumn, sebaliknya, hanya merender elemen yang terlihat dan menggunakan kembali elemen yang tidak terlihat. Untuk daftar panjang, daftar dengan ribuan elemen, daftar tak terbatas atau obrolan — LazyColumn wajib digunakan.

Kapan Column lebih baik: layar dengan formulir (3-10 bidang), kartu profil, kolom vertikal dengan ikon, menu. Column juga mendukung IntrinsicSize, yang berguna untuk tinggi adaptif. Selain itu, Column lebih mudah di-debug — tidak ada virtualisasi, semua elemen terlihat di Layout Inspector. Untuk UI statis, Column adalah pilihan tepat.

LazyColumn memberikan: item caching, identitas berbasis kunci, animasi tambah/hapus (animateItemPlacement), sticky headers. Jika daftar berisi elemen dengan tipe berbeda (viewType berbeda) — gunakan LazyColumn dengan sealed class di items. Column tidak mendukung sticky headers (harus diemulasi melalui scrollable Column). LazyColumn juga mendukung LazyVerticalGrid saat menggunakan GridCells.

Contoh praktis penggunaan Column

Mari kita lihat layar profil pengguna, di mana Column digunakan sebagai wadah utama untuk avatar, nama, bio dan tombol tindakan. Di sini Column dengan IntrinsicSize.Min menyesuaikan dengan konten, dan weight diterapkan untuk mendistribusikan ruang antar bagian.

@Composable
fun UserProfileCard(name: String, bio: String) {
    Card(
        modifier = Modifier.fillMaxWidth().padding(16.dp),
        elevation = CardDefaults.cardElevation(defaultElevation = 4.dp)
    ) {
        Column(
            modifier = Modifier.fillMaxWidth().padding(16.dp),
            horizontalAlignment = Alignment.CenterHorizontally,
            verticalArrangement = Arrangement.spacedBy(8.dp)
        ) {
            // Avatar
            Icon(
                imageVector = Icons.Default.AccountCircle,
                contentDescription = "Avatar",
                modifier = Modifier.size(64.dp)
            )
            // Nama
            Text(name, style = MaterialTheme.typography.headlineSmall)
            // Bio
            Text(bio, style = MaterialTheme.typography.bodyMedium,
                modifier = Modifier.padding(top = 4.dp))
            // Tombol tindakan
            Row(
                horizontalArrangement = Arrangement.spacedBy(12.dp),
                modifier = Modifier.padding(top = 12.dp)
            ) {
                Button(onClick = { }) { Text("Pesan") }
                OutlinedButton(onClick = { }) { Text("Ikuti") }
            }
        }
    }
}

Dalam contoh, Column menggunakan Arrangement.spacedBy(8.dp) untuk jarak seragam antar elemen. horizontalAlignment = CenterHorizontally memusatkan avatar, nama dan bio. Row di dalam Column — wadah bersarang untuk tombol dalam satu baris. Kombinasi Column (penempatan vertikal) dan Row (penempatan horizontal) ini adalah pola tipikal pembangunan UI di Compose.