Menetapkan perilaku item

Gunakan Modifier.flex untuk mengontrol cara item mengubah ukuran, urutan, dan disejajarkan di dalam FlexBox.

Ukuran item

Gunakan fungsi basis, grow, dan shrink untuk mengontrol ukuran item.

FlexBox {
    RedRoundedBox(
        modifier = Modifier.flex {
            basis(FlexBasis.Auto)
            grow(1.0f)
            shrink(0.5f)
        }
    )
}

Menetapkan ukuran awal

Gunakan basis untuk menentukan ukuran awal item sebelum ruang tambahan didistribusikan. Anda dapat menganggapnya sebagai ukuran pilihan item.

Jenis nilai

Perilaku

Cuplikan kode

Catatan: Kotak memiliki ukuran intrinsik maksimum 100dp

Contoh penggunaan lebar penampung 600dp

Auto

(default)

Gunakan ukuran intrinsik maksimum item.

Misalnya, lebar intrinsik maksimum composable Text adalah lebar semua teksnya dalam satu baris - tanpa penggabungan.

 
FlexBox {
    RedRoundedBox(
        Modifier.flex { basis(FlexBasis.Auto) }
    )
    BlueRoundedBox(
        Modifier.flex { basis(FlexBasis.Auto) }
    )
}
 Item yang diukur berdasarkan ukuran intrinsiknya menggunakan basis Auto.

Memperbaiki dp

Ukuran tetap dalam Dp.

 
FlexBox {
    RedRoundedBox(
        Modifier.flex { basis(200.dp) }
    )
    BlueRoundedBox(
        Modifier.flex { basis(100.dp) }
    )
}
 Item yang diukur ke nilai dp tetap menggunakan basis.

Persentase

Persentase ukuran penampung.

 
FlexBox {
    RedRoundedBox(
        Modifier.flex { basis(0.7f) }
    )
    BlueRoundedBox(
        Modifier.flex { basis(0.3f) }
    )
}
 Item yang ukurannya ditentukan sebagai persentase dari ukuran penampung menggunakan basis.

Jika nilai dasar kurang dari ukuran minimum intrinsik item, ukuran minimum intrinsik akan digunakan. Misalnya, jika item Text yang berisi kata memerlukan 50dp untuk ditampilkan, tetapi juga memiliki basis = 10.dp, nilai 50dp akan digunakan.

Perbesar item jika ada ruang

Gunakan grow untuk menentukan seberapa besar item bertambah saat ada ruang ekstra. Ini adalah ruang yang tersisa di penampung FlexBox setelah semua nilai basis item ditambahkan. Nilai grow menunjukkan seberapa banyak ruang tambahan yang akan diterima turunan tertentu, relatif terhadap turunannya. Secara default, item tidak akan bertambah.

Contoh berikut menunjukkan FlexBox dengan tiga item turunan. Masing-masing memiliki nilai dasar 100dp. Anak pertama memiliki nilai grow positif. Karena hanya ada satu turunan dengan nilai grow, nilai sebenarnya tidak relevan - selama nilainya positif, turunan akan menerima semua ruang tambahan.

Gambar menunjukkan perilaku FlexBox saat ukuran penampungnya adalah 600dp.

FlexBox {
    RedRoundedBox(
        title = "400dp",
        modifier = Modifier.flex { grow(1f) }
    )
    BlueRoundedBox(title = "100dp")
    GreenRoundedBox(title = "100dp")
}

Setiap turunan memiliki nilai dasar 100dp. Tersedia ruang ekstra sebesar 300dp.

Tiga item dengan basis masing-masing 100 dp, dalam penampung 600 dp, sebelum pertumbuhan.

Turunan 1 bertambah sebesar 300dp untuk mengisi ruang ekstra.

Item pertama bertambah untuk mengisi ruang ekstra 300 dp.

Dalam contoh berikut, ukuran penampung dan ukuran basis sama. Perbedaannya adalah setiap turunan memiliki nilai grow yang berbeda.

FlexBox {
    RedRoundedBox(
        title = "150dp",
        modifier = Modifier.flex { grow(1f) }
    )
    BlueRoundedBox(
        title = "200dp",
        modifier = Modifier.flex { grow(2f) }
    )
    GreenRoundedBox(
        title = "250dp",
        modifier = Modifier.flex { grow(3f) }
    )
}

Setiap turunan memiliki nilai dasar 100dp. Tersedia ruang ekstra sebesar 300dp.

Tiga item dengan basis masing-masing 100 dp, dalam penampung 600 dp, sebelum pertumbuhan, dengan nilai pertumbuhan yang berbeda.

Total nilai grow adalah 6.

Anak 1 bertambah sebesar (1 / 6) * 300 = 50dp

Anak 2 bertambah sebesar (2 / 6) * 300 = 100dp

Anak 3 bertambah sebesar (3 / 6) * 300 = 150dp

Item bertambah untuk mengisi ruang ekstra 300 dp berdasarkan nilai pertumbuhan relatif.

Mengecilkan item saat ruang tidak cukup

Gunakan shrink untuk menentukan seberapa banyak item menyusut saat penampung FlexBox tidak memiliki cukup ruang untuk semua item. shrink berfungsi dengan cara yang sama seperti grow, tetapi, alih-alih mendistribusikan ruang ekstra ke item, defisit ruang didistribusikan ke item. Nilai shrink menentukan seberapa besar defisit ruang yang diterima item, atau seberapa besar item akan menyusut. Secara default, item memiliki nilai shrink sebesar 1f, yang berarti item tersebut menyusut secara merata.

Contoh berikut menunjukkan dua composable Text dengan teks yang sama. Elemen turunan pertama memiliki nilai penyusutan 1f, yang berarti elemen tersebut menyusut untuk menyerap semua defisit ruang.

FlexBox {
    Text(
        "The quick brown fox",
        fontSize = 36.sp,
        modifier = Modifier
            .background(PastelRed)
            .flex { shrink(1f) }
    )
    Text(
        "The quick brown fox",
        fontSize = 36.sp,
        modifier = Modifier
            .background(PastelBlue)
            .flex { shrink(0f) }
    )
}

Saat ukuran penampung menyusut, Turunan 1 akan menyusut.

Ukuran penampung

UI FlexBox

700dp

 Dua item dalam penampung 700 dp.

500dp

 Item pertama menyusut saat ukuran penampung berkurang menjadi 500 dp.

450dp

 Item pertama menyusut lebih jauh saat ukuran penampung berkurang menjadi 450 dp.

Penyelarasan item

Gunakan alignSelf untuk mengontrol cara item disejajarkan dengan sumbu silang. Tindakan ini akan mengganti properti alignItems container untuk item ini. Properti ini memiliki semua kemungkinan nilai yang sama, dengan tambahan Auto yang mewarisi perilaku penampung FlexBox.

Misalnya, FlexBox ini memiliki alignItems yang ditetapkan ke Start dan lima turunan yang mengganti perataan sumbu silang.

FlexBox(
    config = {
        alignItems(FlexAlignItems.Start)
    }
) {
    RedRoundedBox()
    BlueRoundedBox(modifier = Modifier.flex { alignSelf(FlexAlignSelf.Center) })
    GreenRoundedBox(modifier = Modifier.flex { alignSelf(FlexAlignSelf.End) })
    PinkRoundedBox(modifier = Modifier.flex { alignSelf(FlexAlignSelf.Stretch) })
    OrangeRoundedBox(modifier = Modifier.flex { alignSelf(FlexAlignSelf.Baseline) })
}

Lima turunan dengan berbagai ukuran mengganti properti alignItems.

Urutan item

Secara default, FlexBox menata letak item sesuai urutan yang dideklarasikan dalam kode. Ganti perilaku ini menggunakan order.

Nilai default untuk order adalah nol, dan FlexBox mengurutkan item berdasarkan nilai ini dalam urutan menaik. Setiap item yang memiliki nilai order yang sama akan ditata dalam urutan yang sama dengan yang dideklarasikan. Gunakan nilai order negatif dan positif untuk memindahkan item ke awal atau akhir tata letak tanpa mengubah tempat item dideklarasikan.

Contoh berikut menunjukkan dua item turunan. Yang pertama memiliki order default nol, dan yang kedua memiliki urutan -1. Setelah diurutkan, Anak 1 muncul setelah Anak 2.

FlexBox {
    // Declared first, but will be placed after visually
    RedRoundedBox(
        title = "World"
    )

    // Declared second, but will be placed first visually
    BlueRoundedBox(
        title = "Hello",
        modifier = Modifier.flex {
            order(-1)
        }
    )
}

Dua kotak bulat, dengan kotak pertama berisi teks Hello dan kotak kedua berisi teks World.

Sebelumnya
Menetapkan perilaku penampung
Berikutnya
Mulai menggunakan aplikasi adaptif