Tata letak flow di Compose

FlowRow dan FlowColumn adalah composable yang mirip dengan Row dan Column, tetapi berbeda karena item akan mengalir ke baris berikutnya saat penampung kehabisan ruang. Tindakan ini akan membuat beberapa baris atau kolom. Jumlah item dalam baris juga dapat dikontrol dengan menetapkan maxItemsInEachRow atau maxItemsInEachColumn. Anda sering kali dapat menggunakan FlowRow dan FlowColumn untuk membuat tata letak responsif—konten tidak akan terpotong jika item terlalu besar untuk satu dimensi, dan menggunakan kombinasi maxItemsInEach* dengan Modifier.weight(weight) dapat membantu membuat tata letak yang mengisi/memperluas lebar baris atau kolom saat diperlukan.

Contoh umumnya adalah untuk UI chip atau pemfilteran:

5 chip dalam FlowRow, yang menampilkan kelebihan ke baris berikutnya saat tidak ada lagi ruang yang tersedia.
Gambar 1. Contoh FlowRow

Penggunaan dasar

Untuk menggunakan FlowRow atau FlowColumn, buat composable ini dan tempatkan item di dalamnya yang harus mengikuti alur standar:

@Composable
private fun FlowRowSimpleUsageExample() {
    FlowRow(modifier = Modifier.padding(8.dp)) {
        ChipItem("Price: High to Low")
        ChipItem("Avg rating: 4+")
        ChipItem("Free breakfast")
        ChipItem("Free cancellation")
        ChipItem("£50 pn")
    }
}
FlowLayoutSnippets.kt

Cuplikan ini menghasilkan UI yang ditampilkan di atas, dengan item yang otomatis mengalir ke baris berikutnya saat tidak ada lagi ruang di baris pertama.

Fitur tata letak flow

Tata letak alur memiliki fitur dan properti berikut yang dapat Anda gunakan untuk membuat tata letak yang berbeda di aplikasi.

Pengaturan sumbu utama: pengaturan horizontal atau vertikal

Sumbu utama adalah sumbu tempat item disusun (misalnya, dalam FlowRow, item disusun secara horizontal). Parameter horizontalArrangement di FlowRow mengontrol cara ruang kosong didistribusikan di antara item.

Tabel berikut menunjukkan contoh penetapan horizontalArrangement pada item untuk FlowRow:

Pengaturan horizontal ditetapkan pada FlowRow

Hasil

Arrangement.Start (Default)

 Item yang disusun dengan awal

Arrangement.SpaceBetween

 Pengaturan item dengan spasi di antaranya

Arrangement.Center

 Item diatur di tengah

Arrangement.End

 Item diatur di akhir

Arrangement.SpaceAround

 Item yang disusun dengan ruang di sekitarnya

Arrangement.spacedBy(8.dp)

 Item yang diberi spasi dengan dp tertentu

Untuk FlowColumn, opsi serupa tersedia dengan verticalArrangement, dengan Arrangement.Top default.

Pengaturan sumbu silang

Sumbu silang adalah sumbu yang berlawanan arah dengan sumbu utama. Misalnya, di FlowRow, ini adalah sumbu vertikal. Untuk mengubah cara keseluruhan konten di dalam penampung diatur di sumbu silang, gunakan verticalArrangement untuk FlowRow, dan horizontalArrangement untuk FlowColumn.

Untuk FlowRow, tabel berikut menunjukkan contoh penetapan verticalArrangement yang berbeda pada item:

Pengaturan vertikal ditetapkan di FlowRow

Hasil

Arrangement.Top (Default)

 Pengaturan atas penampung

Arrangement.Bottom

 Pengaturan bagian bawah penampung

Arrangement.Center

 Pengaturan tengah penampung

Untuk FlowColumn, opsi serupa tersedia dengan horizontalArrangement. Pengaturan sumbu silang default adalah Arrangement.Start.

Perataan item individual

Anda mungkin ingin memosisikan setiap item dalam baris dengan perataan yang berbeda. Hal ini berbeda dengan verticalArrangement dan horizontalArrangement karena menyelaraskan item dalam baris saat ini. Anda dapat menerapkan ini dengan Modifier.align().

Misalnya, jika item dalam FlowRow memiliki tinggi yang berbeda, baris akan mengambil tinggi item terbesar dan menerapkan Modifier.align(alignmentOption) ke item:

Perataan vertikal ditetapkan di FlowRow

Hasil

Alignment.Top (Default)

 Item diratakan ke atas

Alignment.Bottom

 Item diratakan ke bawah

Alignment.CenterVertically

 Item diratakan ke tengah

Untuk FlowColumn, opsi serupa tersedia. Perataan default-nya adalah Alignment.Start.

Item maksimum dalam baris atau kolom

Parameter maxItemsInEachRow atau maxItemsInEachColumn menentukan item maksimum di sumbu utama yang diizinkan dalam satu baris sebelum digabungkan ke baris berikutnya. Nilai defaultnya adalah Int.MAX_INT, yang memungkinkan sebanyak mungkin item, selama ukurannya memungkinkan item tersebut sesuai dengan baris.

Misalnya, menetapkan maxItemsInEachRow akan memaksa tata letak awal hanya memiliki 3 item:

Tidak ada batas maksimum yang ditetapkan

maxItemsInEachRow = 3
Tidak ada nilai maksimum yang ditetapkan pada baris alur Item maksimum ditetapkan pada baris alur

Item alur pemuatan lambat

ContextualFlowRow dan ContextualFlowColumn adalah versi khusus FlowRow dan FlowColumn yang memungkinkan Anda memuat lambat konten baris atau kolom alur. Elemen ini juga memberikan informasi tentang posisi item (indeks, nomor baris, dan ukuran yang tersedia), seperti apakah item berada di baris pertama. Hal ini berguna untuk set data yang besar dan jika Anda memerlukan informasi kontekstual tentang item.

Parameter maxLines membatasi jumlah baris yang ditampilkan, dan parameter overflow menentukan apa yang harus ditampilkan saat item yang berlebih tercapai, sehingga Anda dapat menentukan expandIndicator atau collapseIndicator kustom.

Misalnya, untuk menampilkan tombol "+ (jumlah item yang tersisa)" atau "Tampilkan Lebih Sedikit":

val totalCount = 40
var maxLines by remember {
    mutableStateOf(2)
}

val moreOrCollapseIndicator = @Composable { scope: ContextualFlowRowOverflowScope ->
    val remainingItems = totalCount - scope.shownItemCount
    ChipItem(if (remainingItems == 0) "Less" else "+$remainingItems", onClick = {
        if (remainingItems == 0) {
            maxLines = 2
        } else {
            maxLines += 5
        }
    })
}
ContextualFlowRow(
    modifier = Modifier
        .safeDrawingPadding()
        .fillMaxWidth(1f)
        .padding(16.dp)
        .wrapContentHeight(align = Alignment.Top)
        .verticalScroll(rememberScrollState()),
    verticalArrangement = Arrangement.spacedBy(4.dp),
    horizontalArrangement = Arrangement.spacedBy(8.dp),
    maxLines = maxLines,
    overflow = ContextualFlowRowOverflow.expandOrCollapseIndicator(
        minRowsToShowCollapse = 4,
        expandIndicator = moreOrCollapseIndicator,
        collapseIndicator = moreOrCollapseIndicator
    ),
    itemCount = totalCount
) { index ->
    ChipItem("Item $index")
}
FlowLayoutSnippets.kt

Contoh baris alur kontekstual.
Gambar 2. Contoh ContextualFlowRow

Berat item

Bobot akan memperbesar item berdasarkan faktornya dan ruang yang tersedia di baris tempat item tersebut ditempatkan. Yang penting, ada perbedaan antara FlowRow dan Row dengan cara bobot digunakan untuk menghitung lebar item. Untuk Rows, berat didasarkan pada semua item di Row. Dengan FlowRow, bobot didasarkan pada item dalam baris tempat item ditempatkan, bukan semua item dalam penampung FlowRow.

Misalnya, jika Anda memiliki 4 item yang semuanya berada di satu baris, masing-masing dengan bobot 1f, 2f, 1f dan 3f yang berbeda, total bobotnya adalah 7f. Ruang yang tersisa dalam baris atau kolom akan dibagi dengan 7f. Kemudian, setiap lebar item akan dihitung menggunakan: weight * (remainingSpace / totalWeight).

Anda dapat menggunakan kombinasi item Modifier.weight dan maks dengan FlowRow atau FlowColumn untuk membuat tata letak seperti petak. Pendekatan ini berguna untuk membuat tata letak responsif yang menyesuaikan dengan ukuran perangkat Anda.

Ada beberapa contoh berbeda tentang hal yang dapat Anda capai menggunakan bobot. Salah satu contohnya adalah petak dengan item berukuran sama, seperti yang ditunjukkan di bawah ini:

Petak yang dibuat dengan baris alur
Gambar 3. Menggunakan FlowRow untuk membuat petak

Untuk membuat petak dengan ukuran item yang sama, Anda dapat melakukan hal berikut:

val rows = 3
val columns = 3
FlowRow(
    modifier = Modifier.padding(4.dp),
    horizontalArrangement = Arrangement.spacedBy(4.dp),
    maxItemsInEachRow = rows
) {
    val itemModifier = Modifier
        .padding(4.dp)
        .height(80.dp)
        .weight(1f)
        .clip(RoundedCornerShape(8.dp))
        .background(MaterialColors.Blue200)
    repeat(rows * columns) {
        Spacer(modifier = itemModifier)
    }
}
FlowLayoutSnippets.kt

Yang penting, jika Anda menambahkan item lain dan mengulanginya 10 kali, bukan 9, item terakhir akan mengisi seluruh kolom terakhir, karena total bobot untuk seluruh baris adalah 1f:

Ukuran penuh item terakhir di petak
Gambar 4. Menggunakan FlowRow untuk membuat petak dengan item terakhir yang menggunakan lebar penuh

Anda dapat menggabungkan bobot dengan Modifiers lain seperti Modifier.width(exactDpAmount), Modifier.aspectRatio(aspectRatio), atau Modifier.fillMaxWidth(fraction). Semua pengubah ini berfungsi bersama untuk memungkinkan ukuran item yang responsif dalam FlowRow (atau FlowColumn).

Anda juga dapat membuat petak bergantian dengan ukuran item yang berbeda, dengan dua item menggunakan setengah lebar, dan satu item menggunakan lebar penuh kolom berikutnya:

Grid alternatif dengan baris flow
Gambar 5. FlowRow dengan ukuran baris yang bergantian

Anda dapat melakukannya dengan kode berikut:

FlowRow(
    modifier = Modifier.padding(4.dp),
    horizontalArrangement = Arrangement.spacedBy(4.dp),
    maxItemsInEachRow = 2
) {
    val itemModifier = Modifier
        .padding(4.dp)
        .height(80.dp)
        .clip(RoundedCornerShape(8.dp))
        .background(Color.Blue)
    repeat(6) { item ->
        // if the item is the third item, don't use weight modifier, but rather fillMaxWidth
        if ((item + 1) % 3 == 0) {
            Spacer(modifier = itemModifier.fillMaxWidth())
        } else {
            Spacer(modifier = itemModifier.weight(0.5f))
        }
    }
}
FlowLayoutSnippets.kt

Ukuran pecahan

Dengan Modifier.fillMaxWidth(fraction), Anda dapat menentukan ukuran penampung yang harus digunakan item. Hal ini berbeda dengan cara kerja Modifier.fillMaxWidth(fraction) saat diterapkan ke Row atau Column, karena item Row/Column menggunakan persentase lebar yang tersisa, bukan lebar seluruh penampung.

Misalnya, kode berikut menghasilkan hasil yang berbeda saat menggunakan FlowRow vs Row:

FlowRow(
    modifier = Modifier.padding(4.dp),
    horizontalArrangement = Arrangement.spacedBy(4.dp),
    maxItemsInEachRow = 3
) {
    val itemModifier = Modifier
        .clip(RoundedCornerShape(8.dp))
    Box(
        modifier = itemModifier
            .height(200.dp)
            .width(60.dp)
            .background(Color.Red)
    )
    Box(
        modifier = itemModifier
            .height(200.dp)
            .fillMaxWidth(0.7f)
            .background(Color.Blue)
    )
    Box(
        modifier = itemModifier
            .height(200.dp)
            .weight(1f)
            .background(Color.Magenta)
    )
}
FlowLayoutSnippets.kt

FlowRow: Item tengah dengan fraksi 0,7 dari seluruh lebar penampung.

 Lebar pecahan dengan baris alur

Row: Item tengah menggunakan 0,7 persen lebar Row yang tersisa.

 Lebar pecahan dengan baris

fillMaxColumnWidth() dan fillMaxRowHeight()

Menerapkan Modifier.fillMaxColumnWidth() atau Modifier.fillMaxRowHeight() ke item di dalam FlowColumn atau FlowRow memastikan bahwa item di kolom atau baris yang sama memiliki lebar atau tinggi yang sama dengan item terbesar di kolom/baris.

Misalnya, contoh ini menggunakan FlowColumn untuk menampilkan daftar hidangan penutup Android. Anda dapat melihat perbedaan lebar setiap item saat Modifier.fillMaxColumnWidth() diterapkan ke item dibandingkan saat tidak diterapkan dan item digabungkan.

FlowColumn(
    Modifier
        .padding(20.dp)
        .fillMaxHeight()
        .fillMaxWidth(),
    horizontalArrangement = Arrangement.spacedBy(8.dp),
    verticalArrangement = Arrangement.spacedBy(8.dp),
    maxItemsInEachColumn = 5,
) {
    repeat(listDesserts.size) {
        Box(
            Modifier
                .fillMaxColumnWidth()
                .border(1.dp, Color.DarkGray, RoundedCornerShape(8.dp))
                .padding(8.dp)
        ) {

            Text(
                text = listDesserts[it],
                fontSize = 18.sp,
                modifier = Modifier.padding(3.dp)
            )
        }
    }
}
FlowLayoutSnippets.kt

Modifier.fillMaxColumnWidth() diterapkan ke setiap item

 fillMaxColumnWidth

Tidak ada perubahan lebar yang ditetapkan (item penggabungan)

 Tidak ada lebar kolom maksimum isi yang ditetapkan
Sebelumnya
Pager
Berikutnya
Tata letak kustom