Google uses AI technology to translate content into your preferred language. AI translations can contain errors.

Tata letak flow di Compose

FlowRow dan FlowColumn adalah composable yang mirip dengan Row dan Column, tetapi berbeda karena item mengalir ke baris berikutnya saat penampung kehabisan ruang. Hal ini akan membuat beberapa baris atau kolom. Jumlah item dalam satu baris juga dapat dikontrol dengan menetapkan maxItemsInEachRow atau maxItemsInEachColumn. Anda sering 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 jika diperlukan.

Contoh umumnya adalah untuk UI chip atau pemfilteran:

5 chip dalam FlowRow, yang menunjukkan overflow ke baris berikutnya jika 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 aliran 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 jika tidak ada lagi ruang di baris pertama.

Fitur tata letak aliran

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

Pengaturan sumbu utama: pengaturan horizontal atau vertikal

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

Tabel berikut menunjukkan contoh cara menetapkan horizontalArrangement pada item untuk FlowRow:

Pengaturan horizontal yang ditetapkan pada `FlowRow`	Hasil
`Arrangement.Start` (`Default`)
`Arrangement.SpaceBetween`
`Arrangement.Center`
`Arrangement.End`
`Arrangement.SpaceAround`
`Arrangement.spacedBy(8.dp)`

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

Pengaturan sumbu silang

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

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

Pengaturan vertikal yang ditetapkan pada `FlowRow`	Hasil
`Arrangement.Top` (`Default`)
`Arrangement.Bottom`
`Arrangement.Center`

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

Perataan item individual

Anda mungkin ingin memosisikan item individual dalam baris dengan perataan yang berbeda. Hal ini berbeda dengan verticalArrangement dan horizontalArrangement karena item disejajarkan dalam baris saat ini. Anda dapat menerapkannya 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 yang ditetapkan pada `FlowRow`	Hasil
`Alignment.Top` (`Default`)
`Alignment.Bottom`
`Alignment.CenterVertically`

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

Item maksimum dalam baris atau kolom

Parameter maxItemsInEachRow atau maxItemsInEachColumn menentukan item maksimum dalam sumbu utama yang diizinkan dalam satu baris sebelum di-wrap ke baris berikutnya. Nilai default-nya adalah Int.MAX_INT, yang memungkinkan sebanyak mungkin item, selama ukurannya memungkinkan item tersebut masuk ke dalam baris.

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

Tidak ada setelan maksimum	`maxItemsInEachRow = 3`

Bobot item

Bobot akan memperbesar item berdasarkan faktornya dan ruang yang tersedia di baris tempat item ditempatkan. Penting untuk diperhatikan bahwa ada perbedaan antara FlowRow dan Row dalam cara bobot digunakan untuk menghitung lebar item. Untuk Rows, bobot 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 dalam satu baris, masing-masing dengan bobot yang berbeda, yaitu 1f, 2f, 1f, dan 3f, total bobotnya adalah 7f. Ruang yang tersisa dalam baris atau kolom akan dibagi dengan 7f. Kemudian, lebar setiap item akan dihitung menggunakan: weight * (remainingSpace / totalWeight).

Anda dapat menggunakan kombinasi Modifier.weight dan item maksimum 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 tempat item berukuran sama, seperti yang ditunjukkan di bawah:

Petak yang dibuat dengan baris flow — **Gambar 2.** 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

Penting untuk diperhatikan bahwa jika Anda menambahkan item lain dan mengulanginya 10 kali, bukan 9 kali, item terakhir akan menggunakan seluruh kolom terakhir, karena total bobot untuk seluruh baris adalah 1f:

Item terakhir berukuran penuh di petak — **Gambar 3.** Menggunakan `FlowRow` untuk membuat petak dengan item terakhir 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-sama 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:

Petak bergantian dengan baris flow — **Gambar 4.** `FlowRow` dengan ukuran baris yang bergantian

Anda dapat mencapainya 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

Pengukuran pecahan

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

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 0,7 fraksi lebar penampung keseluruhan.
`Row`: Item tengah menggunakan 0,7 persen lebar `Row` yang tersisa.

`fillMaxColumnWidth()` dan `fillMaxRowHeight()`

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

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

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