Jetpack Compose - FlowRow

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

FlowRow adalah komponen tata letak dalam toolkit UI Jetpack Compose yang digunakan untuk menampilkan daftar item secara horizontal dengan cara yang fleksibel dan dinamis. FlowRow akan menata item-item secara horizontal dengan mengikuti alur konten, sehingga cocok digunakan untuk menampilkan daftar item yang dapat berubah secara dinamis dengan lebar yang berbeda-beda.

Anda sebaiknya menggunakan FlowRow ketika:

1. Menampilkan Daftar Horizontal dengan Lebar Fleksibel: Jika Anda perlu menampilkan daftar item secara horizontal dengan lebar yang fleksibel, FlowRow adalah pilihan yang tepat karena akan menata item-item secara otomatis sesuai dengan lebar konten, sehingga mengoptimalkan penggunaan ruang layar.

2. Menampilkan Daftar dengan Isi yang Beragam: Jika daftar item memiliki lebar yang bervariasi, seperti teks dengan panjang yang berbeda-beda atau widget dengan lebar yang fleksibel, FlowRow akan menyesuaikan tata letaknya secara dinamis untuk menampung isi yang beragam dengan baik.

3. Menghindari Keterbatasan Jumlah Kolom: Jika Anda ingin menampilkan daftar item tanpa terikat pada jumlah kolom tertentu, FlowRow akan menata item-item secara horizontal dengan mengikuti alur konten, sehingga tidak dibatasi oleh jumlah kolom.

Perbedaan antara FlowRow dan LazyRow adalah:

• Penataan Konten: FlowRow menyesuaikan lebar item secara dinamis dan menata item-item secara horizontal mengikuti alur konten, sementara LazyRow menata item-item secara horizontal dalam satu baris dengan lebar yang tetap.

Contoh penggunaan FlowRow adalah untuk menampilkan daftar tag dalam sebuah artikel, daftar item dalam keranjang belanja, atau daftar widget dengan lebar yang bervariasi dalam aplikasi. Dalam kasus-kasus ini, FlowRow akan membantu mengoptimalkan penggunaan ruang layar dan meningkatkan pengalaman pengguna.

Parameter/Atribut

@Composable
@ExperimentalLayoutApi
inline fun FlowRow(
    modifier: Modifier = Modifier,
    horizontalArrangement: Arrangement.Horizontal = Arrangement.Start,
    verticalArrangement: Arrangement.Vertical = Arrangement.Top,
    maxItemsInEachRow: Int = Int.MAX_VALUE,
    content: @Composable FlowRowScope.() -> Unit
)

modifier: Modifier = Modifier

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

horizontalArrangement: Arrangement.Horizontal = Arrangement.Start

• Penataan horizontal untuk item-item dalam FlowRow. Ini menentukan cara item-item akan diatur secara horizontal, seperti di kiri, di tengah, atau di kanan.

verticalArrangement: Arrangement.Vertical = Arrangement.Top

• Penataan vertikal untuk item-item dalam FlowRow. Ini menentukan cara item-item akan diatur secara vertikal, seperti di atas, di tengah, atau di bawah.

maxItemsInEachRow: Int = Int.MAX_VALUE

• Jumlah maksimum item dalam setiap baris. Jika jumlah item dalam FlowRow melebihi nilai ini, baris baru akan dibuat. Nilai default adalah Int.MAX_VALUE, yang berarti tidak ada batasan jumlah maksimum item dalam setiap baris.

content: @Composable FlowRowScope.() -> Unit

• Lambda untuk mendefinisikan isi dari FlowRow. Ini memungkinkan Anda untuk menambahkan item-item ke dalam FlowRow menggunakan fungsi-fungsi pembantu yang disediakan oleh FlowRowScope, seperti item, items, dan lainnya.

Contoh

@OptIn(ExperimentalLayoutApi::class)
@Composable
fun DemoFlowRow() {
    FlowRow(
        modifier = Modifier.padding(8.dp),
        horizontalArrangement = Arrangement.SpaceBetween,
        verticalArrangement = Arrangement.Center,
        maxItemsInEachRow = 3
    ) {
        repeat(10) { index ->
            Box(
                modifier = Modifier
                    .size(80.dp)
                    .background(Color.Blue)
            ) {
                Text(
                    text = "Item $index",
                    color = Color.White,
                    textAlign = TextAlign.Center,
                    modifier = Modifier.align(Alignment.Center)
                )
            }
        }
    }
}

✨”Jika Kamu tidak sanggup menahan lelahnya belajar maka kamu harus sanggup menahan perihnya kebodohan” ✨Imam Syafi'i

Video