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 dariRow
.
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 dalamRow
menggunakan fungsi pembantu sepertiBox
,Spacer
, dan lainnya.
Contoh
@Composable
fun DemoRow() {
Row {
Text(text = "The Ngoding")
Text(text = "The Ngoding")
Text(text = "The Ngoding")
}
}
✨”Jika Kamu tidak sanggup menahan lelahnya belajar maka kamu harus sanggup menahan perihnya kebodohan” ✨Imam Syafi'i