Jetpack Compose, Android • 16 Mei 2024

Jetpack Compose - Row

Penting

Pembahasan ini merupakan rentetan dari topik pembahasan tentang Dasar Dasar Jetpack Compose, terdapat hampir 100 pembahasan, untuk melihat daftarnya silahkan klik DAFTAR PEMBAHASAN COMPOSE

Pengertian

Row adalah salah satu dari banyak komponen tata letak dalam toolkit UI Jetpack Compose yang digunakan untuk menempatkan komponen-komponen UI secara horizontal, satu di sebelah yang lain. Dengan menggunakan Row, Anda dapat menyusun elemen-elemen UI dalam satu baris yang berurutan dari kiri ke kanan.

Anda perlu menggunakan Row ketika:

Perlu Menyusun Komponen Horizontal: Jika Anda ingin menempatkan komponen-komponen UI secara berurutan dari kiri ke kanan, Row sangat berguna. Contohnya, ketika Anda ingin menempatkan beberapa tombol atau ikon secara horizontal di dalam sebuah toolbar.
Tata Letak yang Dinamis: Jika Anda memerlukan tata letak yang dapat berubah-ubah secara dinamis tergantung pada logika atau kondisi tertentu, Row memungkinkan Anda untuk menyesuaikan tata letak komponen-komponen UI dengan mudah.
Mendukung Tata Letak Responsif: Jika Anda ingin membuat tata letak yang responsif dan menyesuaikan diri dengan berbagai ukuran layar, Row dapat digunakan untuk menyusun komponen-komponen UI secara horizontal agar dapat dengan mudah menyesuaikan diri dengan lebar layar.

Contoh penggunaan Row adalah untuk membuat tata letak horizontal seperti baris menu atau toolbar di sebuah aplikasi. Dalam hal ini, Row akan menyusun komponen-komponen ini dari kiri ke kanan sehingga tata letaknya menjadi lebih terstruktur dan mudah dipahami.

Parameter/Atribut

@Composable
inline fun Row(
    modifier: Modifier = Modifier,
    horizontalArrangement: Arrangement.Horizontal = Arrangement.Start,
    verticalAlignment: Alignment.Vertical = Alignment.Top,
    content: @Composable RowScope.() -> Unit
)

modifier: Modifier = Modifier

Modifier untuk menyesuaikan tampilan dan perilaku dari Row. Dengan menggunakan modifier, Anda dapat mengontrol hal-hal seperti padding, margin, warna latar belakang, dan tata letak dari Row.

horizontalArrangement: Arrangement.Horizontal = Arrangement.Start

Penataan horizontal dari komponen-komponen dalam Row. Ini menentukan cara komponen-komponen akan disusun secara horizontal, seperti dari kiri ke kanan, dari kanan ke kiri, atau di tengah-tengah.

verticalAlignment: Alignment.Vertical = Alignment.Top

Penataan vertikal dari komponen-komponen dalam Row. Ini menentukan cara komponen-komponen akan disusun secara vertikal, seperti di atas, di bawah, atau di tengah-tengah.

content: RowScope.() -> Unit

Lambda untuk mendefinisikan isi dari Row. Ini memungkinkan Anda untuk menyusun komponen-komponen UI dalam Row menggunakan fungsi pembantu seperti Box, Spacer, dan lainnya.

Contoh

@Composable
fun DemoRow() {
    Row {
        Text(text = "The Ngoding")
        Text(text = "The Ngoding")
        Text(text = "The Ngoding")
    }
}

Row