Jetpack Compose

Layout Dasar: Column, Row, Box

Penjelasan

Column menyusun anak-anaknya VERTIKAL, Row menyusun HORIZONTAL, Box menumpuk anak-anaknya SALING TINDIH (berguna untuk overlay, mis. badge di atas gambar). Ketiganya menerima content lambda berisi Composable anak-anaknya.

Contoh Konsep

Column(modifier = Modifier.padding(16.dp)) {
    Text("Kaos CompileDaily")
    Row(horizontalArrangement = Arrangement.SpaceBetween) {
        Text("Rp 99.000")
        Icon(Icons.Default.ShoppingCart, contentDescription = null)
    }
}

Praktikum

Buat Column berisi Text "Produk Unggulan", diikuti Row berisi dua Text: "Kualitas Terbaik" dan "Harga Terjangkau".

Editor Latihan

Ketik/edit bebas di sini untuk latihan — kode ini tidak dijalankan.

Tips

verticalArrangement (Column) dan horizontalArrangement (Row) mengatur JARAK ANTAR anak (mis. Arrangement.SpaceBetween, Arrangement.Center) — sedangkan horizontalAlignment (Column) dan verticalAlignment (Row) mengatur POSISI anak pada sumbu SILANGnya, dua konsep terpisah yang sering tertukar pemula.

← Kembali Text & Modifier Lanjutkan → State: remember & mutableStateOf