Row di Jetpack Compose: apa itu, properti composable dan cara kerjanya

Apa itu Row di Jetpack Compose

Row — adalah fungsi composable yang menempatkan elemen anak dalam urutan horizontal. Dalam hierarki tata letak Compose, Row menempati posisi kontainer dasar bersama Column dan Box.

Row tidak memerlukan penentuan ukuran — secara otomatis menyesuaikan dengan konten. Lebar Row sama dengan jumlah lebar elemen anak termasuk jarak, kecuali jika Modifier.fillMaxWidth atau ukuran tetap ditetapkan.

Elemen anak Row dapat memiliki pengubah sendiri yang memengaruhi posisi mereka di dalam kontainer. Misalnya, Modifier.weight memungkinkan elemen mengambil bagian proporsional dari ruang yang tersedia.

Menurut Android Developers Blog, 2024, Row memproses elemen anak secara berurutan, menghitung ukurannya berdasarkan aturan pengukuran Compose: pertama elemen tanpa weight diukur, kemudian ruang tersisa didistribusikan antar elemen dengan weight.

Sintaks dan tanda tangan dasar Row

Tanda tangan dasar Row mencakup parameter modifier, horizontalArrangement dan verticalAlignment. Semua elemen anak diteruskan di blok lambda terakhir content.

@Composable
fun RowExample() {
    Row(
        modifier = Modifier.fillMaxWidth().padding(16.dp),
        horizontalArrangement = Arrangement.SpaceEvenly,
        verticalAlignment = Alignment.CenterVertically
    ) {
        Text(text = "Satu")
        Text(text = "Dua")
        Text(text = "Tiga")
    }
}

Properti Row: horizontalArrangement dan verticalAlignment

Parameter horizontalArrangement menentukan bagaimana elemen anak didistribusikan di sepanjang sumbu horizontal di dalam Row. Nilai Start, End, Center, SpaceBetween, SpaceAround dan SpaceEvenly dari kelas Arrangement tersedia.

Arrangement.Start menempatkan elemen di awal kontainer, Arrangement.End — di akhir, dan Arrangement.Center — di tengah. Nilai-nilai ini bekerja mirip dengan properti justify-content di CSS Flexbox.

Arrangement.SpaceBetween mendistribusikan elemen secara merata, menempatkan elemen pertama di awal, terakhir di akhir, dan sisanya dengan jarak yang sama di antara mereka. Menurut Material Design Guidelines, 2025, SpaceBetween optimal untuk panel alat dan baris navigasi.

Parameter verticalAlignment menyelaraskan elemen secara vertikal. Alignment.Top, Alignment.CenterVertically dan Alignment.Bottom tersedia. Properti ini berguna ketika elemen Row memiliki tinggi berbeda — misalnya, ikon di samping teks multi-baris.

Tabel nilai Arrangement

Distribusi ruang dengan Modifier.weight

Modifier.weight — adalah pengubah yang hanya tersedia di dalam Row dan Column, yang mendistribusikan ruang yang tersedia antar elemen anak secara proporsional terhadap nilai yang ditentukan. Jika satu elemen memiliki bobot 1.0f dan lainnya 2.0f, elemen kedua akan menempati ruang dua kali lebih banyak.

Elemen tanpa weight menempati ruang yang diperlukan untuk kontennya. Ruang yang tersisa didistribusikan antar elemen dengan weight secara proporsional terhadap bobotnya. Perilaku ini analog dengan properti flex-grow di CSS Flexbox.

Menurut Android Developer Documentation, 2025, weight hanya berfungsi di dalam Row, Column dan BoxWithConstraints. Saat menggunakan weight di Row, semua elemen anak diukur dalam dua lintasan: pertama elemen tanpa weight, kemudian elemen dengan weight.

@Composable
fun WeightExample() {
    Row(
        modifier = Modifier.fillMaxWidth(),
        horizontalArrangement = Arrangement.Start
    ) {
        Text(
            text = "Kiri",
            modifier = Modifier.weight(1.0f)
        )
        Text(text = "Kanan")
    }
}

Contoh kode dengan Row

Contoh pertama menunjukkan Row dengan ikon dan teks — skenario umum untuk daftar kontak atau pengaturan. Icon dan Text dibungkus dalam Row dengan verticalAlignment di tengah.

@Composable
fun IconWithText() {
    Row(
        verticalAlignment = Alignment.CenterVertically,
        modifier = Modifier.padding(8.dp)
    ) {
        Icon(
            imageVector = Icons.Default.Favorite,
            contentDescription = "Favorite"
        )
        Spacer(modifier = Modifier.width(8.dp))
        Text(text = "Tambahkan ke favorit")
    }
}

Contoh kedua menunjukkan Row dengan tombol dan distribusi merata. SpaceEvenly menjamin jarak yang sama antara semua tombol dan tepi kontainer.

@Composable
fun ButtonRow() {
    Row(
        modifier = Modifier.fillMaxWidth().padding(16.dp),
        horizontalArrangement = Arrangement.SpaceEvenly
    ) {
        Button(onClick = {}) { Text("Batal") }
        Button(onClick = {}) { Text("Simpan") }
    }
}

Contoh ketiga — Row di dalam Card untuk menampilkan peringkat. Row bersarang dengan Modifier.weight memungkinkan bintang peringkat dan nilai numerik menempati ruang tetap.

@Composable
fun RatingRow(rating: Float) {
    Row(
        verticalAlignment = Alignment.CenterVertically
    ) {
        Text(
            text = "Peringkat:",
            modifier = Modifier.weight(1.0f)
        )
        Text(text = "$rating / 5.0")
    }
}

Fitur Row dalam tata letak adaptif

Row memerlukan kontrol lebar dalam tata letak adaptif. Jika konten Row melebihi lebar layar yang tersedia, elemen dapat keluar dari batas kontainer. Untuk mencegahnya, gunakan Modifier.horizontalScroll atau beralih ke Column.

Saat menggabungkan Row dengan Modifier.weight, penting untuk mengatur fillMaxWidth pada Row induk — jika tidak, weight akan mendistribusikan ruang yang tidak ada. Menurut Material Design Guidelines, 2025, Row dengan weight tanpa fillMaxWidth dianggap konfigurasi yang salah.

Untuk antarmuka adaptif, disarankan menggabungkan Row dengan Box atau menggunakan Arrangement.SpaceBetween untuk distribusi otomatis elemen pada berbagai ukuran layar. Ini memberikan fleksibilitas tanpa media queries.

• Modifier.horizontalScroll — menambahkan gulir saat Row meluap
• Modifier.weight — mendistribusikan ruang secara proporsional
• Arrangement.SpaceBetween — distribusi adaptif dengan fiksasi di tepi