Halaman ini diterjemahkan oleh Cloud Translation API.

Batasan dan urutan pengubah

Di Compose, Anda dapat menggabungkan beberapa pengubah untuk mengubah tampilan dan nuansa composable. Rantai pengubah ini dapat memengaruhi batasan yang diteruskan ke composable, yang menentukan batas lebar dan tinggi.

Halaman ini menjelaskan cara pengubah berantai memengaruhi batasan dan, pada akhirnya, pengukuran dan penempatan composable.

Pengubah di hierarki UI

Untuk memahami cara pengubah memengaruhi satu sama lain, sebaiknya visualisasikan tampilannya di hierarki UI, yang dihasilkan selama fase komposisi. Untuk mengetahui informasi selengkapnya, lihat bagian Komposisi.

Pada hierarki UI, Anda dapat memvisualisasikan pengubah sebagai node wrapper untuk node tata letak:

Kode untuk composable dan pengubah, serta representasi visualnya sebagai hierarki UI. — **Gambar 1.** Pengubah yang menggabungkan node tata letak di hierarki UI.

Menambahkan lebih dari satu pengubah ke composable akan membuat rantai pengubah. Saat Anda membuat rantai beberapa pengubah, setiap node pengubah menggabungkan sisa rantai dan node tata letak di dalamnya. Misalnya, saat Anda membuat rantai clip dan pengubah size, node pengubah clip menggabungkan node pengubah size, yang kemudian menggabungkan node tata letak Image.

Dalam fase tata letak, algoritma yang berjalan pada hierarki tetap sama, tetapi setiap node pengubah juga dikunjungi. Dengan cara ini, pengubah dapat mengubah persyaratan ukuran dan penempatan node pengubah atau tata letak yang digabungkan.

Seperti yang ditunjukkan pada Gambar 2, implementasi composable Image dan Text terdiri dari rantai pengubah yang menggabungkan satu node tata letak. Implementasi Row dan Column hanyalah node tata letak yang menjelaskan cara menata letak turunannya.

Struktur pohon dari penggunaan sebelumnya, tetapi sekarang setiap node hanyalah tata letak sederhana, dengan banyak pengubah yang menggabungkan node di sekitarnya. — **Gambar 2.** Struktur hierarki yang sama seperti dalam Gambar 1, tetapi dengan composable dalam hierarki UI yang divisualisasikan sebagai rantai pengubah.

Ringkasnya:

Pengubah menggabungkan satu pengubah atau node tata letak.
Node tata letak dapat menata letak beberapa node turunan.

Bagian berikut menjelaskan cara menggunakan model mental ini untuk menjelaskan tentang rantai pengubah dan pengaruhnya terhadap ukuran composable.

Batasan dalam fase tata letak

Fase tata letak mengikuti algoritma tiga langkah untuk menemukan lebar, tinggi, serta koordinat x dan y setiap node tata letak:

Mengukur turunan: Node mengukur turunannya, jika ada.
Menentukan ukuran sendiri: Berdasarkan pengukuran tersebut, node menentukan ukurannya sendiri.
Turunan tempat: Setiap node turunan ditempatkan relatif terhadap posisi node itu sendiri.

Constraints membantu menemukan ukuran yang tepat untuk node selama dua langkah pertama algoritma. Batasan menentukan batas minimum dan maksimum untuk lebar dan tinggi node. Saat node memutuskan ukurannya, ukuran pengukurannya harus berada dalam rentang ukuran ini.

Jenis-jenis batasan

Batasan dapat berupa salah satu dari hal berikut:

Berbatas: Node memiliki lebar dan tinggi maksimum dan minimum.

Batasan berbatas dari berbagai ukuran dalam satu container. — **Gambar 3.** Batasan dengan batasan.

Tidak dibatasi: Node tidak dibatasi dalam ukuran apa pun. Batas lebar dan tinggi maksimum ditetapkan ke tak terhingga.

Batasan tak terbatas yang memiliki lebar dan tinggi yang ditetapkan ke tak terhingga. Batasan melampaui container. — **Gambar 4.** Batasan tidak terbatas.

Persis: Node diminta untuk mengikuti persyaratan ukuran yang tepat. Batas minimum dan maksimum ditetapkan ke nilai yang sama.

Batasan persis yang sesuai dengan persyaratan ukuran yang tepat dalam penampung. — **Gambar 5.** Batasan pasti.

Kombinasi: Node mengikuti kombinasi jenis batasan di atas. Misalnya, batasan dapat membatasi lebar sekaligus mengizinkan tinggi maksimum yang tidak terbatas, atau menetapkan lebar yang tepat, tetapi memberikan tinggi yang dibatasi.

Dua penampung yang menampilkan kombinasi batasan terbatas dan tidak terbatas serta lebar dan tinggi yang tepat. — **Gambar 6.** Kombinasi batasan terbatas dan tidak terbatas serta lebar dan tinggi yang tepat.

Bagian berikutnya menjelaskan cara batasan ini diteruskan dari induk ke turunan.

Cara penerusan batasan dari induk ke turunan

Selama langkah pertama algoritme yang dijelaskan dalam Batasan dalam fase tata letak, batasan diturunkan dari induk ke turunan dalam hierarki UI.

Saat node induk mengukur turunannya, node tersebut akan memberikan batasan ini kepada setiap turunan untuk memberi tahu seberapa besar atau kecilnya node yang diizinkan. Kemudian, saat menentukan ukurannya sendiri, aplikasi tersebut juga akan mematuhi batasan yang diteruskan oleh induknya sendiri.

Pada level tinggi, algoritma bekerja dengan cara berikut:

Untuk menentukan ukuran yang benar-benar ingin menempatinya, node root di hierarki UI mengukur turunannya dan meneruskan batasan yang sama ke turunan pertamanya.
Jika turunan adalah pengubah yang tidak memengaruhi pengukuran, turunan tersebut akan meneruskan batasan ke pengubah berikutnya. Batasan diteruskan dari rantai pengubah apa adanya kecuali jika pengubah yang memengaruhi pengukuran tercapai. Batasan ini kemudian diubah ukurannya.
Setelah tercapai, node yang tidak memiliki turunan (disebut sebagai "node daun"), akan menentukan ukurannya berdasarkan batasan yang diteruskan, dan menampilkan ukuran yang di-resolve ini ke induknya.
Induk menyesuaikan batasannya berdasarkan pengukuran turunan ini, dan memanggil turunan berikutnya dengan batasan yang disesuaikan ini.
Setelah semua turunan dari induk diukur, node induk akan memutuskan ukurannya sendiri dan mengomunikasikannya kepada induknya.
Dengan cara ini, seluruh pohon akan dilalui kedalaman terlebih dahulu. Akhirnya, semua node telah menentukan ukurannya, dan langkah pengukuran selesai.

Untuk contoh selengkapnya, lihat video Batasan dan urutan pengubah.

Pengubah yang memengaruhi batasan

Anda telah mempelajari di bagian sebelumnya bahwa beberapa pengubah dapat memengaruhi ukuran batasan. Bagian berikut menjelaskan pengubah tertentu yang memengaruhi batasan.

Pengubah `size`

Pengubah size mendeklarasikan ukuran konten yang diinginkan.

Misalnya, hierarki UI berikut harus dirender dalam penampung 300dp oleh 200dp. Batasan dibatasi, sehingga lebar antara 100dp dan 300dp, serta tinggi antara 100dp dan 200dp:

Bagian dari hierarki UI dengan pengubah ukuran yang menggabungkan node tata letak, dan
representasi batasan terbatas yang ditetapkan oleh pengubah ukuran dalam penampung. — **Gambar 7.** Batasan terikat dalam hierarki UI dan representasinya dalam penampung.

Pengubah size menyesuaikan batasan masuk agar cocok dengan nilai yang diteruskan ke nilai tersebut. Dalam contoh ini, nilainya adalah 150dp:

Sama seperti Gambar 7, kecuali dengan pengubah ukuran yang menyesuaikan batasan masuk agar sesuai dengan nilai yang diteruskan ke nilai. — **Gambar 8.** Pengubah `size` menyesuaikan batasan ke `150dp`.

Jika lebar dan tinggi lebih kecil dari batas batasan terkecil, atau lebih besar dari batas batasan terbesar, pengubah akan mencocokkan batasan yang diteruskan sedekat mungkin, sambil tetap mematuhi batasan yang diteruskan:

Dua hierarki UI dan representasinya yang sesuai dalam container. Pada diagram pertama, pengubah ukuran menerima batasan penambahan; yang kedua, pengubah ukuran menyesuaikan
dengan batasan yang terlalu besar, sehingga menghasilkan batasan yang mengisi penampung. — **Gambar 9.** Pengubah `size` yang mematuhi batasan yang diteruskan semirip mungkin.

Perhatikan bahwa membuat rantai beberapa pengubah size tidak akan berfungsi. Pengubah size pertama menetapkan batasan minimum dan maksimum ke nilai tetap. Meskipun pengubah ukuran kedua meminta ukuran yang lebih kecil atau lebih besar, pengubah ukuran masih harus mematuhi batas yang diteruskan, sehingga tidak akan mengganti nilai tersebut:

Rantai dua pengubah ukuran di hierarki UI dan representasinya dalam penampung,
yang merupakan hasil dari nilai pertama yang diteruskan, bukan nilai kedua. — **Gambar 10.** Rantai dua pengubah `size`, yang meneruskan nilai kedua (`50dp`) tidak menggantikan nilai pertama (`100dp`).

Pengubah `requiredSize`

Gunakan pengubah requiredSize, bukan size, jika Anda memerlukan node untuk mengganti batasan yang masuk. Pengubah requiredSize menggantikan batasan yang masuk dan meneruskan ukuran yang Anda tentukan sebagai batas yang tepat.

Saat ukuran diteruskan kembali ke hierarki, node turunan akan dipusatkan di ruang yang tersedia:

Pengubah size dan requiredSize dirantai dalam hierarki UI, dan representasi
terkait dalam penampung. Batasan pengubah requiredSize mengganti batasan
pengubah ukuran. — **Gambar 11.** Pengubah `requiredSize` mengganti batasan masuk dari pengubah `size`.

Pengubah `width` dan `height`

Pengubah size menyesuaikan lebar dan tinggi batasan. Dengan pengubah width, Anda dapat menetapkan lebar tetap, tetapi tidak menentukan tingginya. Demikian pula, dengan pengubah height, Anda dapat menetapkan tinggi tetap, tetapi tidak menentukan lebarnya:

Dua hierarki UI, satu dengan pengubah lebar dan representasi container-nya, dan satu lagi
dengan pengubah tinggi dan representasinya. — **Gambar 12.** Pengubah `width` dan pengubah `height` yang menetapkan lebar dan tinggi tetap masing-masing.

Pengubah `sizeIn`

Pengubah sizeIn memungkinkan Anda menetapkan batasan minimum dan maksimum yang tepat untuk lebar dan tinggi. Gunakan pengubah sizeIn jika Anda memerlukan kontrol mendetail atas batasan.

Contoh

Bagian ini menunjukkan dan menjelaskan output dari beberapa cuplikan kode dengan pengubah berantai.

Image(
    painterResource(R.drawable.hero),
    contentDescription = null,
    Modifier
        .fillMaxSize()
        .size(50.dp)
)ConstraintsModifiersSnippets.kt

Cuplikan ini menghasilkan output berikut:

Pengubah fillMaxSize mengubah batasan untuk menetapkan lebar dan tinggi minimum ke nilai maksimum — lebar 300dp dan tinggi 200dp.
Meskipun ingin menggunakan ukuran 50dp, pengubah size tetap harus mematuhi batasan minimum yang masuk. Jadi pengubah size juga akan menghasilkan batas batasan yang tepat dari 300 dengan 200, yang secara efektif mengabaikan nilai yang diberikan dalam pengubah size.
Image mengikuti batas ini dan melaporkan ukuran 300 menurut 200, yang diteruskan ke atas hierarki.

Image(
    painterResource(R.drawable.hero),
    contentDescription = null,
    Modifier
        .fillMaxSize()
        .wrapContentSize()
        .size(50.dp)
)ConstraintsModifiersSnippets.kt

Cuplikan ini menghasilkan output berikut:

Pengubah fillMaxSize menyesuaikan batasan untuk menetapkan lebar dan tinggi minimum ke nilai maksimum — lebar 300dp dan tinggi 200dp.
Pengubah wrapContentSize mereset batasan minimum. Jadi, meskipun fillMaxSize menghasilkan batasan tetap, wrapContentSize meresetnya kembali ke batasan terbatas. Node berikut sekarang dapat mengisi seluruh ruang lagi, atau lebih kecil dari seluruh ruang.
Pengubah size menetapkan batasan ke batas minimum dan maksimum 50.
Image me-resolve ke ukuran 50 oleh 50, dan pengubah size meneruskannya.
Pengubah wrapContentSize memiliki properti khusus. Fungsi ini mengambil turunannya dan menempatkannya di tengah batas minimum yang tersedia yang diteruskan ke sana. Ukuran yang dikomunikasikan kepada induknya dengan demikian sama dengan batas minimum yang diteruskan ke dalamnya.

Dengan hanya menggabungkan tiga pengubah, Anda dapat menentukan ukuran untuk composable dan menempatkannya di tengah induknya.

Image(
    painterResource(R.drawable.hero),
    contentDescription = null,
    Modifier
        .clip(CircleShape)
        .padding(10.dp)
        .size(100.dp)
)ConstraintsModifiersSnippets.kt

Cuplikan ini menghasilkan output berikut:

Pengubah clip tidak mengubah batasan.
- Pengubah padding menurunkan batasan maksimum.
- Pengubah size menetapkan semua batasan ke 100dp.
- Image mematuhi batasan tersebut dan melaporkan ukuran 100 menurut 100dp.
- Pengubah padding menambahkan 10dp di semua ukuran sehingga meningkatkan lebar dan tinggi yang dilaporkan sebesar 20dp.
- Sekarang dalam fase menggambar, pengubah clip bertindak pada kanvas 120 dengan 120dp. Jadi, fungsi membuat mask lingkaran dengan ukuran tersebut.
- Pengubah padding kemudian menyisipkan kontennya dengan 10dp pada semua ukuran sehingga menurunkan ukuran kanvas menjadi 100 sebesar 100dp.
- Image digambar dalam kanvas tersebut. Gambar terpotong berdasarkan lingkaran asli 120dp sehingga outputnya adalah hasil non-bulat.